Knockoutjs实战开发：属性监控（Observables）和依赖跟踪（Dependency tracking ）
<div id="cnblogs_post_body">昨天我们通过Knockoutjs环境搭建一文对Knockoutjs进行了简单的了解，我们在使用Js的很多情况下都是为了实现页面的局部刷新从而可以获得数据，使用Knockoutjs的情况也不例外，在Knockoutjs中提供了属性监控(Observables)和依赖跟踪（Dependency tracking）这两个概念，通过它们可以对我们所关心的控件(比如：text文本框)实现动态监控，这样，当空间的值改变或者出现对应的事件是，Knockoutjs可以对其最初相应的反应（此反应不需要刷新页面），从而得到我们想要的结果。下面我们来看一个比较经典的例子：一个人的名字由&ldquo;姓&rdquo;和&ldquo;名&rdquo;组成，由用户输入一个姓名，中间由空格隔开，然后通过span动态显示用户的姓和名。代码如下：
<div class="cnblogs_code"> 1 <script type="text/javascript" src="knockout-2.2.0.js"></script> 2 3 <p>First name: <span data-bind="text: firstName"></span></p> 4 <p>Last name: <span data-bind="text: lastName"></span></p> 5 <h2>Hello, <input data-bind="value: fullName"/>!</h2> 6 7 <script type="text/javascript"> 8 function MyViewModel() { 9 this.firstName = ko.observable('张');10 this.lastName = ko.observable('三');11 12 this.fullName = ko.computed({13 read: function () {14 return this.firstName() + " " + this.lastName();15 },16 write: function (value) {17 var lastSpacePos = value.lastIndexOf(" ");18 if (lastSpacePos > 0) {19 this.firstName(value.substring(0, lastSpacePos));20 this.lastName(value.substring(lastSpacePos + 1)); 21 }22 },23 owner: this24 });25 }26 27 ko.applyBindings(new MyViewModel());28 </script>
页:
[1]