您的位置：首页 > Web前端 > JavaScript

knockout.js表格删除增加行，计算总金额实例

2014-05-05 14:45 369 查看

<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航