KendoUI MVVM用法
2014-01-17 11:10
417 查看
KendoUI>Framework>MVVM>Overview
出处:/article/4881466.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>
相关文章推荐
- 善良公社之EasyUI框架下在datagrid中显示数据
- NSString / NSData 和图片之间的转换
- Chrome不支持showModalDialog模态对话框和无法返回returnValue的问题
- iOS开发-ios7 UIAlertView自定义
- android Timer 定时器 更新UI
- 使用Glue4Net部署.NET应用
- Glue4Ne应用部署托管服务
- C#中StringBuilder类的使用总结
- xcodebuild和xcrun自动化编译ipa包
- 禁用UIButton的方法
- 交互设计专业必备知识,看到了好的课程,给自己一点储备
- Queries Union
- Menu
- ueditor文本编辑器支持ctrl+v图片文字样式
- 链表的QuickSort快速排序法
- JAVA hdu 2192 MagicBuilding
- iOS7对UITableViewCell的层级改变
- DWZ (JUI) 教程 layoutH
- iOS Dev (27) 初步了解下UIView的最常用知识
- 能让土豆能自动播放的代码 --- &autoPlay=true