<html>
<head>
<title></title>
<script type="text/javascript" src="js/knockout-3.1.0.js"></script>
<style type="text/css">
.con {
width: 600px;
margin: 100px auto;
}
table {
width: 100%;
border-collapse: collapse;
text-align: center;
}
td {
border: 1px solid #000;
height: 28px;
}
button {
cursor: pointer;
}
</style>
</head>
<body>
<div class="con">
<p>
<button data-bind="click: addSeat(0), enable: seatExample().length < 10">+增加行。最多到总行数为10</button></p>
<!-- <p><button data-bind="click: addSeat(1)">+增加第二行</button></p>
<p><button data-bind="click: addSeat(2)">+增加第三行</button></p>-->
<table>
<thead>
<tr>
<td>固定名字</td>
<td>名字</td>
<td>价格</td>
<td>可选择</td>
<td>删除</td>
</tr>
</thead>
<!--foreach:绑定的是实例化后的viewmodel。都可以用到seatExample实例化的属性。-->
<tbody data-bind="foreach: seatExample">
<tr>
<!--name:绑定的是静态模板的第一个参数-->
<td data-bind="text: name"></td>
<!--meal().mealTit:绑定的是静态模板的第二个参数，是一个可观测值，具有function可修改值的功能。进一步调用viewmodel中赋予它的属性值。-->
<td data-bind="text: meal().mealTit"></td>
<!--meal().price:绑定的是静态模板的第二个参数，是一个可观测值，具有function可修改值的功能。进一步调用viewmodel中赋予它的属性值。-->
<td data-bind="text: '$' + meal().price.toFixed(2)"></td>
<!--select绑定viewmodel中新定义的闭包对象，获取其属性值，设置其value值为可观测的meal值。-->
<td>
<select data-bind="options: $root.meals, value: meal, optionsText: 'mealTit'"></select></td> //在绑定为viewmodel中的内容时加上$root.可观测值
<td>
<p>
<button data-bind="click: $root.removeSeat">-删除一行</button></p>
</td>
</tr>
</tbody>
<tr>
<td colspan="5">总额：<span data-bind="text: totalPrice().toFixed(2)"></span></td>
</tr>
</table>
</div>
</body>
<script>
function seat(name, init) {//定义静态模板
var self = this;
self.name = name;
self.meal = ko.observable(init); //定义可观测值。可绑定，可更新，可观测，可订阅
}
function ViewModel() { //实例化
var _this = this;
_this.meals = [ //定义新的闭包对象，即function可设置可修改值。可再调用其内部属性mealTit和price
{ mealTit: "meal_1", price: 0 },
{ mealTit: "meal_2", price: 100 },
{ mealTit: "meal_3", price: 200 }
];
_this.seatExample = ko.observableArray([ //用array来使数组实例化对象成为可观测值，可以被订阅的。
new seat("name_1", _this.meals[0]), //把上面在viewmodel里新定义的meals()对象(具备function功能，可访问其属性。)作为seat模板的第二个参数。array([,])
new seat("name_2", _this.meals[1]),
new seat("name_3", _this.meals[2])
]);
_this.addSeat = function (i) { //增加对静态模板的操作。
_this.seatExample.push(new seat("name", _this.meals[i]));
}
_this.removeSeat = function (n) { //增加对静态模板的操作。
_this.seatExample.remove(n);
}
_this.totalPrice = function () {
var total = 0;
for (var k = 0; k < _this.seatExample().length; k++) {
total += _this.seatExample()[k].meal().price;
}
return total;
};
}
// Activates knockout.js
ko.applyBindings(new ViewModel());
</script>
</html>
447
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
