-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathractivejs_hello.html
62 lines (55 loc) · 1.79 KB
/
ractivejs_hello.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
<!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 id="name" placeholder="insert name" value="{{name}}">
<br>
<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>