在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

 function Myviewmodel(){}