学步园

Model View View-Model是一种设计模式来帮助开发者更好地对数据层Model和视图层View进行分层。View-Model层 负责 暴露Model层和View层交互的数据。

Kendo MVVM是一种MVVM的实现，当然可以跟Kendo 组件(widgets)和数据源(datasource)进行无缝结合。

首先，

我们要创建一个View-Model对象，View-Model对象根据你的Model数据产生。具体做法就是，传入一个JS对象到Kendo.observable方法。

var viewModel = kendo.observable({

    name: "John Doe",

    displayGreeting: function() {

        var name = this.get("name");

        alert("Hello, " + name + "!!!");

    }

});

然后，我们创建View，View就是一些html元素，用来绑定View-Model。

<div id="view">

    <input data-bind="value: name" />

    <button data-bind="click: displayGreeting">Display Greeting</button>
</div>

   

从代码里，我们可以看到input元素的value属性跟View-Model的name字段绑定。于是，当View-Model的name字段的值发生改变时，input元素的value值也随着改变。反之，input元素的value值发生改变，View-Model的name字段的值也随着发生变化。而且变化是实时的哦。

我们还看到，button元素的click事件与View-Model的dispalyGreeting方法发生绑定。于是，当你点击button时，便调用displayGreeting方法。

最后，我们把View和View-Model进行绑定。

kendo.bind($("#view"), viewModel);

关于绑定：

绑定格式，<binding name>: <view model field or method> ，当然你也可以绑定html元素的其他属性，source, html, attr, visible, enabled等等。当然你可以连续绑定多个html元素，比如

data-bind="value: name, visible: isNameVisible"。或者这样绑定：

<div data-bind="text: person.name"></div>
<script>
    var viewModel = kendo.observable({
        person: {
            name: "John Doe"
        }
    });
    kendo.bind($("div"), viewModel);
</script>
   

注意点：


不要这样绑定，<div data-bind="text: person.name.toLowerCase()"></div>，这是html，不是javascript。要实现这个目的，请这样。

 

<div data-bind="text: person.lowerCaseName"></div>
<script>
    var viewModel = kendo.observable({
        person: {
            name: "John Doe",
            lowerCaseName: function() {
                return this.get("name").toLowerCase();
            }
        }
    });
    kendo.bind($("div"), viewModel);
</script>