在knockout里面，核心的有三个监控属性：Observables,DependentObservables,ObservableArray，Observe的意思翻译过来是观察、观测的意思，如果说成观察属性或者观测属性感觉不太恰当，我们暂且叫监控属性。
3.1、Observables：监控属性
我们将上面的例子改成这样：
<head> <meta content="width=device-width" /> <title>Index3</title> <script src="https://www.jb51.net/~/scripts/jquery-1.9.1.min.js"></script> <script src="https://www.jb51.net/~/scripts/knockout/knockout-3.4.0.min.js"></script> </head> <body> <div> 姓名：<label data-bind="text:Name"></label><br /> 职业：<input type="text" data-bind="textinput:Profession" /> </div> <div> <input type="text" /> </div> <script type="text/javascript"> //1.定义ViewModel var myViewModel = { Name: ko.observable("Lilei"), Profession: "软件工程师", }; //2.激活绑定 ko.applyBindings(myViewModel); $(function () { //注册文本框的textchange事件 $("#txt_testobservable").on("input", function () { myViewModel.Name($(this).val()); }); }); </script> </body>
ko.observable("Lilei") 这一句的意义是将viewmodel的Name属性添加成为监控属性，一定Name属性变成监控属性，神奇的事情就发生了，我们来看看当我们写myViewModel.的时候：
Name由原来的属性变成方法了，也就是说一旦添加了ko.observable()，那么对应的属性就会变成方法，那么对于Name的取值和赋值都需要使用myViewModel.Name()来处理。我们先来看看效果：
代码释疑：很显然 myViewModel.Name($(this).val()); 这一句将当前文本框的值赋给了Name属性，由于界面绑定了Name属性，所以label里面的值也随之发生了变化。或者你会说，这个使用textchange事件也可以做到的，只要将当前文本框的值赋给label标签，也可以达到这个效果，这个不算什么。确实，你的写法也可以达到目的，但是我们的监控属性的意义在于，任何地方改变了Name的值，界面都会随之变化，而不用每个地方去给label标签赋值，JS里面只需要把关注点方法myViewModel.Name()上面即可。是不是很厉害~~
3.2、DependentObservables：监控依赖属性
如果看了上面的监控属性还没过瘾？下面再来看看监控依赖属性的使用。
我们将代码再改下看看：
<head> <meta content="width=device-width" /> <title>Index3</title> <script src="https://www.jb51.net/~/scripts/jquery-1.9.1.min.js"></script> <script src="https://www.jb51.net/~/scripts/knockout/knockout-3.4.0.min.js"></script> </head> <body> <div> 姓名：<input type="text" data-bind="textinput:Name" /><br /> 职业：<input type="text" data-bind="textinput:Profession" /><br /> 描述：<label data-bind="text:Des"></label> </div> <script type="text/javascript"> //1.定义ViewModel var myViewModel = { Name: ko.observable("Lilei"), Profession: ko.observable("软件工程师"), }; myViewModel.Des = ko.dependentObservable(function () { return "本人姓名——" + myViewModel.Name() + "，职业——" + myViewModel.Profession(); }); //2.激活绑定 ko.applyBindings(myViewModel);</script> </body>
先来看看效果：
代码释疑：通过添加监控依赖属性 ko.dependentObservable() 将Des属性的值能同时监控到Name和Profession两个的变化，其中任何一个发生变化，Des绑定的标签都会触发改变，这样做的最大好处就是避免了我们js去操作dom的麻烦，有点意思吧。
3.3、ObservableArray；监控数组
除了上面两种，ko还支持对数组对象的监控。我们来看一个例子：
<head> <meta content="width=device-width" /> <title>Index3</title> <script src="https://www.jb51.net/~/scripts/jquery-1.9.1.min.js"></script> <script src="https://www.jb51.net/~/scripts/knockout/knockout-3.4.0.min.js"></script> </head> <body> <div><select data-bind="options:deptArr, optionsText:'Name'"></select> </div> <div> <input type="text" /><input type="button" value="新增部门" /> </div> <script type="text/javascript"> var deptArr = ko.observableArray([ { id: 1, Name: '研发部' }, { id: 2, Name: '行政部' }, { id: 3, Name: '人事部' } ]); var viewModel = { deptArr: deptArr, }; ko.applyBindings(viewModel); var i=4; $(function () { $("#btn_test").on("click", function () { deptArr.push({ id: i++, Name: $("#txt_testobservable").val() }); }); }); </script> </body>
看看效果：
