-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhello.html
88 lines (62 loc) · 2.08 KB
/
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hello</title>
</head>
<body>
<script src="https://unpkg.com/san@latest/dist/san.dev.js"></script>
<script>
// var MyApp=san.defineComponent({
// template:'<p>Hello {{name}}!</p>',//内容模板
// initData: function(){ //初始数据
// return{
// name:'san'
// };
// }
// });
//列表渲染
// var MyApp=san.defineComponent({
// template:'<ul><li s-for="item in list">{{item}}</li></ul>',//使用for指令对列表进行遍历
// attached:function(){
// this.data.set('list',['san','er','esui','etpl','esl']);
// }
// });
//双向绑定
// var MyApp=san.defineComponent({
// template:''+
// '<div>'+
// '<input value="{=name=}" placeholder="please input">'+
// 'hello {{name}}!'+
// '</div>'
// });
var MyApp=san.defineComponent({
template: `
<ul>
<li
san-for="item, index in datasource"
style="{{item.color ? 'background:' + item.color : ''}}"
class="{{item.id == value ? 'selected' : ''}}"
on-click="itemClick(index)"
>{{ item.title }}</li>
</ul>
`,
toggle: function () {
var isHidden = this.data.get('isHidden');
this.data.set('isHidden', !isHidden);
},
initData: function () {
return {
value:1,
datasource: [
{color: 'blue', title: 'blue',id:1},
{color: 'yellow', title: 'yellow',id:2}
]
};
}
});
var myApp=new MyApp();//初始化组件对象
myApp.attach(document.body);//让组件在相应的地方渲染
</script>
</body>
</html>