Model View View-Model是一种设计模式来帮助开发者更好地对数据层Model和视图层View进行分层。View-Model层 负责 暴露Model层和View层交互的数据。
Kendo MVVM是一种MVVM的实现,当然可以跟Kendo 组件(widgets)和数据源(datasource)进行无缝结合。
首先,
我们要创建一个View-Model对象,View-Model对象根据你的Model数据产生。具体做法就是,传入一个JS对象到Kendo.observable方法。
name: "John Doe",
displayGreeting: function() {
var name = this.get("name");
alert("Hello, " + name + "!!!");
}
});
然后,我们创建View,View就是一些html元素,用来绑定View-Model。
<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进行绑定。
关于绑定:
绑定格式,<binding name>: <view model field or method>
,当然你也可以绑定html元素的其他属性,source, html, attr, visible, enabled等等。当然你可以连续绑定多个html元素,比如
data-bind="value: name, visible: isNameVisible"。或者这样绑定:
<script>
var viewModel = kendo.observable({
person: {
name: "John Doe"
}
});
kendo.bind($("div"), viewModel);
</script>
注意点:
不要这样绑定,<div data-bind="text: person.name.toLowerCase()"></div>
,这是html,不是javascript。要实现这个目的,请这样。
<script>
var viewModel = kendo.observable({
person: {
name: "John Doe",
lowerCaseName: function() {
return this.get("name").toLowerCase();
}
}
});
kendo.bind($("div"), viewModel);
</script>