KendoUI>Framework>MVVM>Overview

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>

 

 

 

 

 

 

 

posted @ 2012-04-05 11:26  草珊瑚  阅读(1021)  评论(0编辑  收藏  举报