forked from weepy/o_O
/
_random.html
78 lines (56 loc) · 1.52 KB
/
_random.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
73
74
75
76
77
78
<body>
<h1>o_O: funnyface.js</h1>
</body>
<script src='../o_O.js'></script>
<script src='../lib/jQuery.js'></script>
<div id='person'>
<h1>Person</h1>
<p bind='text: name()'></p>
<p bind='text: surname()'></p>
<p bind='text: fullName()'></p>
<p bind='text: "fullName length: " + fullName().length'></p>
<input bind='val: age()'></input>
<input bind='value: surname; css: {color: color()};'></input>
<p bind='css: {color: color()}'>HELLO</p>
<button bind='click: handleClick'>ok</button>
</div>
<script>
function Person(name, surname, age, color) {
this.name = o_O.property(name)
this.surname = o_O.property(surname)
this.age = o_O.property(age)
this.color = o_O.property(color || 'red')
}
Person.prototype.fullName = function() {
return this.name() + " " + this.surname()
}
Person.prototype.handleClick = function() {
alert("yay!")
}
setInterval(function() {
o.age(o.age()+1)
}, 1000)
setInterval(function() {
o.name(Math.random() * 100)
}, 1000)
var o = new Person('Bobby', 'Reade', 30)
o_O.bind(o, '#person')
</script>
<h2>Persons</h2>
<div id='persons' bind='foreach: people'>
<p>
<s bind='text: name(); css: {color: color() }'></s>
<s bind='text: surname()'></s>
</p>
</div>
<script>
var company = {
people: o_O.collection([
new Person('Bobby', 'Reado', 30 ),
new Person('Bobby2', 'Readoo', 301, "green"),
])
}
o_O.bind(company, '#persons')
company.people.add( new Person('ZZBobby', 'Reado', 30 ) )
company.people.remove(company.people.find(1))
</script>