<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Demo3-依赖跟踪</title>
<script type="text/javascript" src="https://www.jb51.net/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script>
</head>
<body>
<!--双向绑定-->
<div>
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName"/></p>
<p>Full name: <strong data-bind="text: fullName"></strong></p>
<button data-bind="click: capitalizeLastName">LastName To Upper</button>
</div>
<script type="text/javascript">
function ViewModel() {
this.firstName = ko.observable("Tommy");
this.lastName = ko.observable("Li");
// 依赖跟踪
this.fullName = ko.computed(function () {
return this.firstName() + " " + this.lastName();
},this);
// 通过代码改变observable的值
this.capitalizeLastName = function() {
this.lastName(this.lastName().toUpperCase());
};
}
ko.applyBindings(new ViewModel());
</script>
</body>
</html>
接下来，让我们看一下使用声明式绑定和依赖跟踪复杂点的例子。具体示例代码如下：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Demo4-列表绑定</title> <script type="text/javascript" src="https://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script> </head> <body> <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> <td><a href="#" data-bind="click: $root.remove">Remove</a></td> </tr> </tbody> </table> <h3>Order Price: <span data-bind="text: price"></span></h3> <button data-bind="click: addComputer">Add a Computer</button> <script type="text/javascript"> var products = [{ name: "Learnighard 学习笔记", price: 49 }, { name: "小米Note", price: 999 }, { name: "宏碁笔记本", price: 4999 }]; // 订单类 function Order() { var self = this; this.items = ko.observableArray([ new Item(products[0], 1), new Item(products[1],2) ]); // 订单总价 this.price = ko.computed(function() { var p = 0; for (var i = 0; i < self.items().length; i++) { var item = self.items()[i]; p += item.product.price * item.amount(); } return p; }, self); this.remove = function(item) { self.items.remove(item); }; this.addComputer = function () { self.items.push(new Item(products[2], 1)); }; } // 订单项类 function Item(product, amount) { var self = this; this.product = product; this.amount = ko.observable(amount); // 订单项总价 this.subTotal = ko.computed(function() { return self.amount() * self.product.price; }, self); } ko.applyBindings(new Order()); </script> </body> </html>
五、模板
看完以上几个例子，其实你应该感觉到KO（KnockoutJS的简称）的上手还是非常简单的。因为其语法都非常容易理解，接下来看下KO中模板的使用。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Demo5-模板绑定</title> <script type="text/javascript" src="https://www.jb51.net/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script> </head> <body> <!--模板绑定，div的内容为personTemplate模板内的标签--> <!--即最终生成如下标签--> <!--<div> <p>Name: <strong data-bind="text: name"></strong></p> <p>Age: <strong data-bind="text: age"></strong></p> </div>--> <div data-bind="template:'personTemplate'"></div> <script type="text/html"> <p>Name: <strong data-bind="text: name"></strong></p> <p>Age: <strong data-bind="text: age"></strong></p> </script> <script type="text/javascript"> var ViewModel = { name: ko.observable('Tommy'), age: ko.observable(28), makeOlder: function() { this.age(this.age() + 1); } }; ko.applyBindings(ViewModel); </script> </body> </html>