Kendo UI教程: Kendo MVVM (一) 概述
来源:互联网 发布:古力娜扎最新照片 知乎 编辑:程序博客网 时间:2024/05/15 01:01
Model View ViewModel (MVVM) 是开发人员经常使用的一种设计模式,以实现数据模型(Model)和视图(View)的分离。MVVM中的ViewModel部分负责把模型中的数据对象以某种方便的形式和View结合起来(通常是通过数据绑定的方式)。
Kendo MVVM实现了MVVN设计模式,并且支持和Kendo框架的其它部分(如UI组件和数据源)的无缝连接。
准备开始
使用MVVM模式首先创建ViewModel对象,ViewModel对象代表了可以使用View显示的数据对象,Kendo框架中使用kendo.observable函数通过传入JavaScript对象的方法来定义一个ViewModel对象。比如:
var viewModel = kendo.observable({ name: "John Doe", displayGreeting: function() { var name = this.get("name"); alert("Hello, " + name + "!!!"); }});
然后使用HTML创建一个View,这个View包含一个按钮和一个文本框。
<div id="view"> <input data-bind="value: name" /> <button data-bind="click: displayGreeting">Display Greeting</button></div>
其中文本框(input) 通过data-bind 属性指明绑定到ViewModel对象的 name域。 此时name域值发生变化将会反映到UI界面的Input输入框内容的变化。反之亦然,当UI输入框内容发生变化时,ViewModel的name域也发生变化。
按钮的click事件绑定到ViewModel的 displayGreeting 方法。
最后,通过bind方法将View和ViewModel绑定起来。
kendo.bind($("#view"), viewModel);
完整的代码如下:
<!doctype html><html><head> <title>Kendo UI Web</title> <link href="styles/kendo.common.min.css" rel="stylesheet" /> <link href="styles/kendo.default.min.css" rel="stylesheet" /> <script src="js/jquery.min.js"></script> <script src="js/kendo.web.min.js"></script></head><body><div id="view"> <input data-bind="value: name" /> <button data-bind="click: displayGreeting">Display Greeting</button></div> <script> var viewModel = kendo.observable({ name: "John Doe", displayGreeting: function () { var name = this.get("name"); alert("Hello, " + name + "!!!"); } }); kendo.bind($("#view"), viewModel); </script></body></html>
数据绑定
数据绑定将DOM元素(或者UI组件)的属性绑定到ViewModel的某个属性或是方法。绑定通过设置data-bind属性,采用 “绑定名称 : ViewModel的属性或方法”的格式,也就是 value : name 的形式来指明。上面的例子使用了两种不同类型的绑定,value和click。 Kendo MVVM也支持其它类型的绑定,如source, html, attr ,visible,enable等。 data-bind 也可以支持通过逗号分隔的属性列表。Kendo MVVM数据绑定也支持嵌套的ViewModel 属性。
比如下例 把div绑定到person.name:
<div data-bind="text: person.name"></div><script>var viewModel = kendo.observable({ person: { name: "John Doe" }});kendo.bind($("div"), viewModel);</script>
要注意的是data-bindings的值不是Javascript代码,不可以使用在data-bindings中使用javascript 方法,比如
<div data-bind="text: person.name.toLowerCase()"></div>要实现上面使用小写的功能,可以使用下面的实现:
<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>
本文转自:© 引路蜂移动软件
- Kendo UI教程: Kendo MVVM (一) 概述
- Kendo UI开发教程(10): Kendo MVVM (一) 概述
- Kendo UI开发教程(10): Kendo MVVM (一) 概述
- Kendo UI开发教程:Kendo DataSource概述
- 【Kendo UI 中文教程】概述
- Kendo UI开发教程(12): Kendo MVVM 数据绑定(一) attr
- Kendo UI开发教程(12): Kendo MVVM 数据绑定(一) attr
- Kendo UI开发教程(12): Kendo MVVM 数据绑定(一) attr
- Kendo UI开发教程(11): Kendo MVVM (二) ObservableObject 对象
- Kendo UI开发教程(11): Kendo MVVM (二) ObservableObject 对象
- Kendo UI开发教程(7): Kendo UI 模板概述
- Kendo UI开发教程(8): Kendo UI 特效概述
- Kendo UI开发教程(9): Kendo UI Validator 概述
- Kendo UI开发教程(7): Kendo UI 模板概述
- Kendo UI开发教程(8): Kendo UI 特效概述
- Kendo UI开发教程(9): Kendo UI Validator 概述
- Kendo UI开发教程:Kendo UI模板概述
- Kendo UI开发教程(23): 单页面应用(一)概述
- VsFTP 配置:用户
- $(document).ready(function()
- USACO 3.1.1 Agri-Net 最短网络(最小生成树Prime算法)
- java加载资源路径以及ClassPath的关系
- Android 2.1 源码结构分析
- Kendo UI教程: Kendo MVVM (一) 概述
- Remove Ulead VideoStudio with WindowsUninstaller.Org Removal Tips
- Google Keep 更新,整合时间提醒、地点提醒、Google Now
- 人人都是产品经理读后感(持续更新)
- cmd 批量复制文件名
- android快捷简单的实现音乐播放器
- 每天学习一点——Android
- C#序列化和反序列化
- Qt for Windows 安装与配置