kendo-ui的MVVM模式

摘要：

　　MVVM(ModelViewViewModel)是一种帮助开发者将数据从模型分离的设计模式。MVVM的ViewModel负责将数据对象从模型中分离出来，通过这种方式数据就很容易控制数据如何显示在视图上。

创建View-Model对象：

　　首先我们需要创建一个View-Model对象，他是控制你的数据显示在视图上。

创建对象

var viewModel = kendo.observable({    name: "John Doe",    displayGreeting: function() {        var name = this.get("name");        alert("Hello, " + name + "!!!");    }});

创建视图

<div id="view">    <input data-bind="value: name" />    <button data-bind="click: displayGreeting">Display Greeting</button></div>

然后将对象绑定到视图上

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

如何工作呢？

　　input元素的value值是通过data-bind属性绑定到viewModel的name字段，这个绑定是双向的，当改变viewModel的name字段值，视图上input的value值也会被改变。当改变视图上input元素的value值，viewModel的name字段也会被改变。

绑定：

　　?元素通过data-bind属性绑定到viewModel，当你想通过一个对象绑定到视图上，你可以像下面这样定义视图模型

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

data-bind还支持的属性有source,html,attr,visible,enabled等，支持多个属性，以逗号分隔。

注意：

　　绑定不是javascript，像下面这样的绑定就是不对的

<div data-bind="text: person.name.toLowerCase()"></div>

ObservableObject：

　　kendo.data.ObservableObject是MVVM模式中非常重要的一部分，它支持跟踪变化和通知用户发生变化，所有的视图模型对象都继承它。

创建ObservableObject

var viewModel1 = new kendo.data.ObservableObject( {  field1: "value1",  field2: "value2"}); var viewModel2 = kendo.observable( {  field1: "value1",  field2: "value2"});

上面两种方式都可以创建ObservableObject

注意：视图模型必须在定义ObservableObject之后使用，否则无效。

设置与获取属性值：

　　我们可以通过viewModel对象来获取属性值，如下：

var viewModel = kendo.observable({    name: "John Doe"}); viewModel.set("name", "Jane Doe"); //set the "name" field to "Jane Doe" var name = viewModel.get("name");alert(name); // shows "Jane Doe"

关键字this：

　　我们可以通过this来获取视图模型的其他属性值，如下：

<span data-bind="text: fullName"></span><script>var viewModel = kendo.observable({    firstName: "John",    lastName: "Doe",    fullName: function() {        return this.get("firstName") + " " + this.get("lastName");    }}); kendo.bind($("span"), viewModel);</script>

data-bind属性：

attr：

　　attr可以用来绑定DOM元素的属性，例如：href、title等，对于多个属性我们可以用对象来绑定，如下：

<img id="logo" data-bind="attr: { src: imageSource, alt: imageAlt }" /><script>var viewModel = kendo.observable({    imageSource: "http://www.telerik.com/image/kendo-logo.png",    imageAlt: "Kendo Logo"}); kendo.bind($("#logo"), viewModel);</script>

显示到视图上就会变成如下：

<img id="logo" src="http://www.telerik.com/image/kendo-logo.png" alt="Kendo Logo"" />

checked：

　　checked属性使用来选择复选框或者单选框，属性值为true或false，如下：

<input type="checkbox" data-bind="checked: isChecked" /><script>var viewModel = kendo.observable({    isChecked: false}); kendo.bind($("input"), viewModel);</script>

对于多个复选框，根据value值来决定选中哪一个复选框，属性值是一个数组，如下：

<input type="checkbox" value="Red"   data-bind="checked: colors" /><input type="checkbox" value="Green" data-bind="checked: colors" /><input type="checkbox" value="Blue"  data-bind="checked: colors" /><script>var viewModel = kendo.observable({    colors: ["Red"]}); kendo.bind($("input"), viewModel);</script>

单选框，如下：

<input type="radio" value="Red"   name="color" data-bind="checked: selectedColor" /><input type="radio" value="Green" name="color" data-bind="checked: selectedColor" /><input type="radio" value="Blue"  name="color" data-bind="checked: selectedColor" /><script>var viewModel = kendo.observable({    selectedColor: "Green"}); kendo.bind($("input"), viewModel);</script>

注意：单选框应该有相同的name值，checked只适合可以勾选的元素。

click：

　　click属性将绑定一个方法到视图模型上，当点击这个DOM元素该方法将会被调用。

<div id="view"><span data-bind="click: showDescription">Show description</span><span data-bind="visible: isDescriptionShown, text: description"></span> <script>var viewModel = kendo.observable({    description: "Description",    isDescriptionShown: false,    showDescription: function(e) {        // show the span by setting isDescriptionShown to true        this.set("isDescriptionShown", true);    }}); kendo.bind($("#view"), viewModel);</script> </div>

我们也可以通过events属性来绑定click事件，如下：

<span data-bind="click: clickHandler"></span> <span data-bind="events: { click: clickHandler }"></span>

阻止事件冒泡

　　我们可以使用stopPRopagation来阻止click事件冒泡，如下：

<span data-bind="click: click">Click</span><script>var viewModel = kendo.observable({    click: function(e) {        e.stopPropagation();    }}); kendo.bind($("span"), viewModel);</script>

阻止默认事件

　　使用preventDefault方法来阻止浏览器默认行为。

<a href="http://example.com" data-bind="click: click">Click</span><script>var viewModel = kendo.observable({    click: function(e) {        // stop the browser from navigating to http://example.com        e.preventDefault();    }}); kendo.bind($("a"), viewModel);</script>

custom：

　　kendo MVVM提供自定义绑定属性，这有利于我们自己做一些扩展。我们可以通过kendo.data.Binder来注册一个属性。

单项绑定

　　这种自定义属性当视图模型的属性值改变时，DOM元素将被更新，但是当DOM元素改变时并不会更新视图模型属性值。如下：

<script>    kendo.data.binders.slide = kendo.data.Binder.extend({        refresh: function() {            var value = this.bindings["slide"].get();             if (value) {                $(this.element).slideDown();            } else {                $(this.element).slideUp();            }        }    });     var viewModel = kendo.observable({        slideValue: true    });     kendo.bind(document.body, viewModel);</script> <div id="target" data-bind="slide: slideValue">    One Big Orange Square.</div>

双向绑定

　　这种自定义的属性支持双向绑定，即当DOM元素改变时会触发视图模型的改变，当视图模型属性值改变时会触发DOM元素的改变。如下：

<script>    kendo.data.binders.numericValue = kendo.data.Binder.extend({        init: function(element, bindings, options) {            //call the base constructor            kendo.data.Binder.fn.init.call(this, element, bindings, options);             var that = this;            //listen for the change event of the element            $(that.element).on("change", function() {                that.change(); //call the change function            });        },        refresh: function() {            var that = this,                value = that.bindings["numericValue"].get(); //get the value from the View-Model             $(that.element).val(value); //update the HTML input element        },        change: function() {            var value = this.element.value;            //in this example the View-Model will be updated only if the value of the input is a number            if (!isNaN(value)) {                this.bindings["numericValue"].set(value); //update the View-Model            }        }    });     //View-Model source    var viewModel = kendo.observable({        number: 10    });     kendo.bind(document.body, viewModel);</script> <!-- View source --><input data-bind="numericValue: number" />Input value: <span data-bind="text: number" />

组件绑定

　　这种自定义属性支持当视图模型属性值改变时会触发组件的改变。如下：

//the following example demonstrates how to bind the max value of a NumericTextBox widgetkendo.data.binders.widget.max = kendo.data.Binder.extend({    init: function(widget, bindings, options) {        //call the base constructor        kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);    },    refresh: function() {        var that = this,        value = that.bindings["max"].get(); //get the value from the View-Model        $(that.element).data("kendoNumericTextBox").max(value); //update the widget    }}); <!-- View source --><input d