KendoUI MVVM用法

KendoUI>Framework>MVVM>Overview
出处：http://www.cnblogs.com/samwu/archive/2012/04/05/2432855.html

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 >