-
Notifications
You must be signed in to change notification settings - Fork 0
/
4-6KO的方式实现循环绑定.html
62 lines (56 loc) · 1.75 KB
/
4-6KO的方式实现循环绑定.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">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<table style="border: 1px solid #f90;">
<thead>
<tr>
<th>id</th>
<th>英文名</th>
<th>中文名</th>
<th>描述</th>
</tr>
</thead>
<tbody id="tabBody" data-bind="foreach:PlantsArray">
<tr>
<td data-bind="html:$index"></td>
<td data-bind="html:englishName"></td>
<td data-bind="html:(zhName=='第4项'?zhName+'<b>[家]</b>':zhName)"></td>
<td data-bind="html:descript"></td>
</tr>
</tbody>
</table>
<a href="#" data-bind="click:pushNew">新增</a>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/knockout.js"></script>
<script>
var plants = [
{id:"1",englishName:"1-1",zhName:"第一项",descript:"描述1"},
{id:"2",englishName:"2-1",zhName:"第2项",descript:"描述2"},
{id:"3",englishName:"3-1",zhName:"第3项",descript:"描述3"},
{id:"4",englishName:"4-1",zhName:"第4项",descript:"描述4"},
{id:"5",englishName:"5-1",zhName:"第5项",descript:"描述5"},
{id:"6",englishName:"6-1",zhName:"第6项",descript:"描述6"},
{id:"7",englishName:"7-1",zhName:"第7项",descript:"描述7"}
];
$(document).ready(function() {
var viewModel = function() {
this.PlantsArray = ko.observableArray(plants);
this.pushNew = function() {
this.PlantsArray.push({id:"8",englishName:"unknown",zhName:"未知",descript:"等待填充"});
console.log(plants);
//取消a标签的默认事件 防止页面发生滚动
return false;
};
};
var currentViewModel = new viewModel();
ko.applyBindings(currentViewModel);
});
</script>
</html>