separated files (library/example)

arkenidar · Jun 4, 2017 · ec61b8f · ec61b8f
1 parent 7e8e2b8
commit ec61b8f
Show file tree

Hide file tree

Showing 7 changed files with 337 additions and 213 deletions.
diff --git a/basic_mix.html b/basic_mix.html
diff --git a/ractivejs_hello.html b/ractivejs_hello.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang='en-GB'>
+<head>
+  <meta charset='utf-8'>
+  <title>RactiveJS examples</title>
+</head>
+<body>
+<!--
+      1. This is the element we'll render our Ractive to.
+-->
+<div id='container'></div>
+
+<!--
+      2. You can load a template in many ways. For convenience, we'll include it in
+      a script tag so that we don't need to mess around with AJAX or multiline strings.
+      Note that we've set the type attribute to 'text/ractive' - though it can be
+      just about anything except 'text/javascript'
+-->
+<script id='template' type='text/ractive'>
+  <p>
+    <input id="name" placeholder="insert name" value="{{name}}">
+    <span>Hello, {{name2}}!</span>
+  </p>
+</script>
+
+<!--
+      3. You can always get the most recent stable version from the URL below.
+      If you want the newest features (unstable!), use the 'edge' version instead:
+
+          http://cdn.ractivejs.org/edge/ractive.min.js
+
+      If you need IE8 support, change 'ractive' to 'ractive-legacy'.
+-->
+<!-- <script src='http://cdn.ractivejs.org/latest/ractive.min.js'></script> -->
+<script src='ractive.js'></script>
+
+<!--
+      4. We've got an element in the DOM, we've created a template, and we've
+      loaded the library - now it's time to build our Hello World app.
+-->
+<script>
+  new Ractive({
+    // The `el` option can be a node, an ID, or a CSS selector.
+    el: '#container',
+
+    // We could pass in a string, but for the sake of convenience
+    // we're passing the ID of the <script> tag above.
+    template: '#template',
+
+    // Here, we're passing in some initial data
+    data: {
+      name: '',
+    },
+    computed: {
+      name2: function () { return this.get('name')!==''?this.get('name'):"world" },
+    },
+  });
+</script>
+</body>
+</html>
diff --git a/ractivejs_passwords.html b/ractivejs_passwords.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang='en-GB'>
+<head>
+  <meta charset='utf-8'>
+  <title>RactiveJS examples</title>
+</head>
+<body>
+<!--
+      1. This is the element we'll render our Ractive to.
+-->
+<div id='container'></div>
+
+<!--
+      2. You can load a template in many ways. For convenience, we'll include it in
+      a script tag so that we don't need to mess around with AJAX or multiline strings.
+      Note that we've set the type attribute to 'text/ractive' - though it can be
+      just about anything except 'text/javascript'
+-->
+<script id='template' type='text/ractive'>
+  <p>
+    <input type="checkbox" id="show_password" checked="{{show_password}}">
+    <label for="show_password">show password</label>
+    <input id="password" placeholder="insert password" value="{{password}}" type="{{password_input_type}}">
+    <input id="password_repeated" placeholder="repeat password" value="{{password_repeated}}" type="{{password_input_type}}">      
+    {{#if password||password_repeated}}
+      {{#if password==password_repeated}}
+        <span>Password is confirmed</span>
+      {{else}}
+        <span>Password should be repeated to be confirmed</span>
+      {{/if}}
+    {{/if}}
+  </p>
+</script>
+
+<!--
+      3. You can always get the most recent stable version from the URL below.
+      If you want the newest features (unstable!), use the 'edge' version instead:
+
+          http://cdn.ractivejs.org/edge/ractive.min.js
+
+      If you need IE8 support, change 'ractive' to 'ractive-legacy'.
+-->
+<!-- <script src='http://cdn.ractivejs.org/latest/ractive.min.js'></script> -->
+<script src='ractive.js'></script>
+
+<!--
+      4. We've got an element in the DOM, we've created a template, and we've
+      loaded the library - now it's time to build our Hello World app.
+-->
+<script>
+  new Ractive({
+    // The `el` option can be a node, an ID, or a CSS selector.
+    el: '#container',
+
+    // We could pass in a string, but for the sake of convenience
+    // we're passing the ID of the <script> tag above.
+    template: '#template',
+
+    // Here, we're passing in some initial data
+    data: {
+    },
+    computed: {
+      password_input_type: function(){ return this.get('show_password')?'text':'password'},
+    },
+  });
+</script>
+</body>
+</html>