在Knockoutjs中提供了属性监控(Observables)和依赖跟踪（Dependency tracking）这两个概念，通过它们可以对我们所关心的控件(比如：text文本框)实现动态监控，这样，当空间的值改变或者出现对应的事件是，Knockoutjs可以对其最初相应的反应（此反应不需要刷新页面），从而得到我们想要的结果。

下面我们来看一个比较经典的例子：一个人的名字由“姓”和“名”组成，由用户输入一个姓名，中间由空格隔开，然后通过span动态显示用户的姓和名。代码如下

<script type="text/javascript" src="knockout-2.2.0.js"></script>

<p>First name: <span data-bind="text: firstName"></span></p> 
<p>Last name: <span data-bind="text: lastName"></span></p> 
<h2>Hello,<input data-bind="value: fullName"/>!</h2>
  
<script type="text/javascript">
    function Myviewmodel() {
        this.firstName = ko.observable('张');
        this.lastName = ko.observable('三');

        this.fullName = ko.computed({
            read: function () {
                return this.firstName() + " " + this.lastName();
            },write: function (value) {
                var lastSpacePos = value.lastIndexOf(" ");
                if (lastSpacePos > 0) {  
                    this.firstName(value.substring(0,lastSpacePos));
                    this.lastName(value.substring(lastSpacePos + 1)); 
                }
            },owner: this
        });
    }

    ko.applyBindings(new Myviewmodel());
</script>

在讲解以上的代码之前，我们首先来了解一下MVVM(Model-View-View Model)的概念

一、MVVM(Model-View-View Model)

MVVM是一种用户界面的设计模式，它将精巧、复杂的设计算法隐藏在用户界面的背后，从而使我们可以更加方便的使用它。它分为以下的三个部分：

（1）、Model层：此类似于MVC中的Model层，用来保存我们应用程序的数据。在使用Knockoutjs时，我们通常是使用Ajax来向服务端付出请求来读写Model层的数据的。

（2）、View Model层：此层是建立在UI上面的纯粹的数据操作。它是和我们的HTML代码分离开来的JavaScript对象，但并不代表持久化对象，它只是对用户正在操作的且没有进行保存的数据，此设计可以保持View Model的纯洁性，从而能更好的处理复杂的数据操作。

（3）、View层：此层是用户可以看到的，它用来显示从View Model层传递过来的数据、发出请求命令(比如用户点击了某个Button)、当View Model的值改变时作出相应的更新等。在使用Knockoutjs时，此层仅仅代表HTML页面或者是服务端通过模版生成的HTML页面。

在了解完MVVM的概念后，我们就可以着手分析以上的代码了：

二、首先定义viewmodel

 @H_301_56@function Myviewmodel(){}

在此viewmodel中又定义了三个属性：

 @H_301_56@this.firstName = ko.observable('张');  @H_301_56@this.lastName = ko.observable('三'); 
 @H_301_56@this.fullName = ko.computed({});

我们先来看前两个属性，即：firstName和lastName，这两个属性都是使用ko.observable()来定义的，使用此方法来定义就是告诉Knockoutjs属性firstName和lastName需要进行属性监控，这样当firstName和lastName的值改变时，就会触动对应的View层的组件做出相应的改变，这样才会实现当用户输入完fullName之后，firstName和lastName做出相应的改变。

三、Computed Observables(组合监控属性)

我们在定义第三个fullName属性时使用的是：ko.computed()方法，此方法代表将多个监控属性组合到一起(在这里我们将firstName和lastName进行组合形成了fullName)，当组合属性中的任何一个监控属性的值改变时，组合属性的值也会做出相应的改变

this.fullName = ko.computed({
            read: function () {
                return this.firstName() + " " + this.lastName();
            },owner: this
        });

在此例中，我们使用了组合属性的三个参数：read、write和owner。其中，

（1）、read是必须的，表示返回此组合属性的值。

（2）、write是可选的，如果我们使用此属性，则代表此组合属性是可写的，当从View层传入一个value值，则我们可以根据自己的需要对值进行处理。这里我需要将value根据空格拆分，然后分别赋值给firstName和lastName。
（3）、owner可选，一般值为this。

四、激活属性监控

1 ko.applyBindings(@H_301_56@new Myviewmodel());

这里我们使用ko.applyBindings()对我们定义的Myviewmodel进行激活，这样我们在进行绑定时就可以看到各个属性的值，如果没有进行激活的话，则不会显示对应属性的值，这点我们要注意了。

五、绑定属性到View层

1 @H_301_56@<p@H_301_56@>First name: @H_301_56@<span data-bind@H_301_56@="text: firstName"@H_301_56@></span@H_301_56@></p@H_301_56@> 
2 @H_301_56@<p@H_301_56@>Last name: @H_301_56@<span data-bind@H_301_56@="text: lastName"@H_301_56@></span@H_301_56@></p@H_301_56@> 
3 @H_301_56@<h2@H_301_56@>Hello,@H_301_56@<input data-bind@H_301_56@="value: fullName"@H_301_56@/>!@H_301_56@</h2@H_301_56@>

这里使用data-bind分别对firstName、lastName和fullName进行了绑定，这样我们就可以看到各个属性的值了。

六、为什么使用组合属性(Computed Observables)

在使用组合属性(Computed Observables)时，我们可以对我们想要处理的属性或者验证做出相应的措施，比如：

（1）、值的转换

<script type="text/javascript" src="knockout-2.2.0.js"></script>

<p>Enter bid price: <input data-bind="value: formattedPrice"/></p>
  
<script type="text/javascript">
    function Myviewmodel() {
        this.price = ko.observable(25.99);

        this.formattedPrice = ko.computed({
            read: function () {
                return '￥' + this.price().toFixed(2);
            },write: function (value) {
                value = parseFloat(value.replace(/[^\.\d]/g,""));
                this.price(isNaN(value) ? 0 : value);  
            },owner: this
        });
    }

    ko.applyBindings(new Myviewmodel());
</script>

<script type="text/javascript" src="knockout-2.2.0.js"></script>

<p>Enter a numeric value: <input data-bind="value: attemptedValue"/></p> 
<div data-bind="visible: !lastInputWasValid()">That's not a number!</div>
  
<script type="text/javascript">
    function Myviewmodel() {
        this.acceptedNumericValue = ko.observable(123);
        this.lastInputWasValid = ko.observable(true);

        this.attemptedValue = ko.computed({
            read: this.acceptedNumericValue,write: function (value) {
                if (isNaN(value))
                    this.lastInputWasValid(false);
                else {
                    this.lastInputWasValid(true);
                    this.acceptedNumericValue(value); 
                }
            },owner: this
        });
    }

    ko.applyBindings(new Myviewmodel());
</script>