-
Notifications
You must be signed in to change notification settings - Fork 1
/
ractivejs_passwords.html
72 lines (65 loc) · 2.28 KB
/
ractivejs_passwords.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!doctype html>
<html lang='en-GB'>
<head>
<meta charset='utf-8'>
<title>RactiveJS examples</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</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>
<br>
<input id="password" placeholder="insert password" value="{{password}}" type="{{password_input_type}}">
<br>
<input id="password_repeated" placeholder="repeat password" value="{{password_repeated}}" type="{{password_input_type}}">
<br>
{{#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>