<table>
<thead>
<tr>
<td>Name</td>
<td>Amount</td>
<td>Price</td>
</tr>
</thead>
<tbody data-bind="foreach: items">
<tr>
<td data-bind="text: product.name"></td>
<td><select data-bind="options:[1,2,3,4,5,6],value: amount"></select></td>
<td data-bind="text: subTotal"></td>
</tr>
</tbody>
</table>
<h3>Order Price:<span data-bind="text: price"></span></h3>
这样一个基本的订单页面就好了，能够选择数量，价格会自动更新：
下面给订单加上增删产品的功能,先给Order加上如下的方法:
复制代码 代码如下:
function Order() {
//……
self.remove = function (item) {
self.items.remove(item);
}
self.addMouse = function () {
self.items.push(new Item(products[2],1));
}
}
给表格加上一列删除按钮：
复制代码 代码如下:
<td><a href="#" data-bind="click: $root.remove">Remove</a></td>
再在表格底部加上一个增加产品的按钮:
复制代码 代码如下:
<button data-bind="click: addMouse">Add a Mouse</button>
这时候，observableArray的功能就体现了，当你点击删除按钮或者底部的按钮的时候，页面节点会跟着变化，而不需要手动更新DOM节点，这使得前端的JS大大简化。
您可能感兴趣的文章: