/
index.html
75 lines (70 loc) · 2.69 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="avalon.js" type="text/javascript"></script>
<script>
avalon.define("simple", function(vm) {
vm.firstName = "司徒"
vm.lastName = "正美"
vm.fullName = {//一个包含set或get的对象会被当成PropertyDescriptor,
set: function(val) {//里面必须用this指向scope,不能使用scope
var array = (val || "").split(" ");
this.firstName = array[0] || "";
this.lastName = array[1] || "";
},
get: function() {
return this.firstName + " " + this.lastName;
}
}
vm.fruits = [{name: "xxx"}, {name: "yyy"}, {name: "ooo"}, {name: "ppp"}];
vm.push = function() {
vm.fruits.push({name: "ccccccccc"});
};
vm.pop = function() {
vm.fruits.pop();
};
vm.reverse = function() {
vm.fruits.reverse();
};
vm.replace = function() {
vm.fruits = [{name: 1}, {name: 2}];
};
vm.reverseNumbers = function() {
vm.numbers.reverse();
};
vm.numbers = ["1", "2", "3", "4"]
vm.nick = {
kkk: {
name: "暗黑之民"
}
}
vm.$watch("firstName", function(v, v2) {
window.JSON && console.log(JSON.stringify(vm.$json))
})
});
</script>
</head>
<body ms-controller="simple">
<p>First name: <input ms-model="firstName" /></p>
<p>Last name: <input ms-model="lastName" /></p>
<p>Hello, <input ms-model="fullName"></p>
<div>{{firstName +" | "+ lastName }}</div>
<p>nick name: <input ms-model="nick.kkk.name" /></p>
<p>{{nick.kkk.name}}</p>
<div ms-each-el="fruits" >
<h3>{{el.name}}</h3>
<p>这是第{{$index}}个了</p>
<hr/>
</div>
<button ms-click="push">push</button>
<button ms-click="reverse">reverse</button>
<button ms-click="pop">pop</button>
<button ms-click="replace">replace</button>
<ol ms-each-number="numbers" >
<li>{{number}}</li>
</ol>
<button ms-click="reverseNumbers">reverseNumbers</button>
</body>
</html>