MVVM                    model----view model----model 实现页面和model之间的动态绑定

grid 支持 events  source  visible绑定

第一步建立一个observable对象   对象为参数

var viewModel = kendo.observable()

第二步实现视图与 viewModel绑定

 kendo.bind($("#example"), viewModel);  //jQuery对象

注意对某一属性设置值时使用

  this.set("isDescriptionShown", true);  
     showDescription: function(e) {
     　　e.stopPropagation(); 
 　　　　e.preventDefault();
        this.set("isDescriptionShown", true);  //给属性赋值
   }






<!DOCTYPE html>

<html>

<head>

    <title></title>

    <link rel="stylesheet" href="styles/kendo.common.min.css" />

    <link rel="stylesheet" href="styles/kendo.default.min.css" />

    <link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />

    <script src="js/jquery.min.js"></script>

    <script src="js/kendo.all.min.js"></script>

</head>

<body>

<div id="example">

    <div class="demo-section k-content wide">

        <div>

            <h4>Add or update a record</h4>

            <div data-role="grid"

                 data-editable="true"

                 data-toolbar="['create', 'save']"

                 data-columns="[

                                 { 'field': 'ProductName', 'width': 270 },

                                 { 'field': 'UnitPrice' },

                              ]"

                 data-bind="source: products,   //绑定的属性

                            visible: isVisible,   //显示隐藏

                            events: {

                              save: onSave

                            }"

                 style="height: 200px"></div>

        </div>

        <div style="padding-top: 1em;">

            <h4>Console</h4>

            <div class="console"></div>

        </div>

    </div>

    <div class="box wide">

        <div class="box-col">

            <h4>Configuration</h4>

            <div>

                <label><input type="checkbox" data-bind="checked: isVisible">Visible</label>  //绑定的属性

            </div>

        </div>

        <div class="box-col">

            <h4>Information</h4>

            Kendo UI Grid supports the

            <a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/events">events</a>,

            <a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/source">source</a> and

            <a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/visible">visible</a> bindings.

        </div>

    </div>

<script>

    var viewModel = kendo.observable({ //观察者 检测属性的变化

        isVisible: true,

        onSave: function(e) {

            kendoConsole.log("event :: save(" + kendo.stringify(e.values, null, 4) + ")");

        },

        products: new kendo.data.DataSource({

            schema: {  //图表

                model: {

                    id: "ProductID",

                    fields: {

                        ProductName: { type: "string" },

                        UnitPrice: { type: "number" }

                    }

                }

            },

            batch: true,  //批量的

            transport: {

                read: {

                    url: "https://demos.telerik.com/kendo-ui/service/products",

                    dataType: "jsonp"

                },

                update: {

                    url: "https://demos.telerik.com/kendo-ui/service/products/update",

                    dataType: "jsonp"

                },

                create: {

                    url: "https://demos.telerik.com/kendo-ui/service/products/create",

                    dataType: "jsonp"

                },

                parameterMap: function(options, operation) {

                    if (operation !== "read" && options.models) {

                        return {models: kendo.stringify(options.models)};

                    }

                }

            }

        })

    });

    kendo.bind($("#example"), viewModel);  //实现  视图和 viewModel的绑定

</script>

</div>

</body>

</html>


												


											
kendo ui 实现MVVM的更多相关文章
	

    
								
  1. Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events
		
    本篇和Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click类似,为事件绑定的一般形式.Events绑定支持将ViewModel的方法绑定到DOM元素的事件处理(如鼠标事 ...
    
		
    2. 
						
  2. Web UI开发推荐！Kendo UI for jQuery自定义小部件——使用MVVM
		
    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
    
		
    3. 
						
  3. Kendo UI for jQuery使用教程：使用MVVM初始化（二）
		
    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
    
		
    4. 
						
  4. Kendo UI for jQuery使用教程：使用MVVM初始化（一）
		
    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
    
		
    5. 
						
  5. kendo ui简介
		
    Kendo UI Web包含所有创建高速HTML5 web app的必备元素:UI组件.数据源.验证.一个MVVM框架.主题.模板等等. 移动HTML5带UI的开发框架层出不穷,常见的有Sencha  ...
    
		
    6. 
						
  6. HTML5 UI框架Kendo UI Web教程：创建自定义组件（三）
		
    Kendo UI Web包 含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等.在前面的2篇文章<HTML5 Web app开发工具Ke ...
    
		
    7. 
						
  7. HTML5 UI框架Kendo UI Web中如何创建自定义组件（二）
		
    在前面的文章<HTML5 UI框架Kendo UI Web自定义组件(一)>中,对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解,下面将继续前面的内容. 使用一个数据源  ...
    
		
    8. 
						
  8. HTML5 UI框架Kendo UI Web自定义组件（一）
		
    Kendo UI Web包含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等.在Kendo UI Web中如何创建自定义组件呢,在下面的文章中 ...
    
		
    9. 
						
  9. HTML5 UI框架Kendo UI Web中如何实现Grid网格控件本地化
		
    Kendo UI Web包含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等. 为了使得产品可以符合不同市场的本地化需求和语言,Kendo U ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 开源API网关，你选对了么？
			
    开源API网关,你选对了么? api网关的本质 不用扯那么多,也不用画图,一句话说清楚 api网关:流量总入口,得以集中控制! 就这么简单 api网关协议上最基本要支持HTTP 和 WebSocket ...
    
			
    2. 
						
  2. Go Web 编程之 模板（一）
			
    概述 模板引擎是 Web 编程中必不可少的一个组件.模板能分离逻辑和数据,使得逻辑简洁清晰,并且模板可复用.引用第二篇文章<程序结构>一文中的图示,我们可以看到模板引擎在 Web 程序结构 ...
    
			
    3. 
						
  3. ArcEngine DEM叠加影像
			
    代码执行前: 代码执行后: 影像叠加代码: /// <summary> /// 叠加DEM /// </summary> /// <param name="pR ...
    
			
    4. 
						
  4. redis最新版本安装及开机自启
			
    的系统是ubuntu,安装方式有多种,一种是通过apt仓库,一种是下载源码,编译安装 1.通过apt仓库 具体命令: sudo apt-get update sudo apt-get install  ...
    
			
    5. 
						
  5. 轻松弄懂var、let、const之间的区别
			
    ECMAScript 6(简称ES6)是JavaScript语言的下一代标准,于2015年6月正式发布,也称ECMAScript 2015. ES6的好处 ES6的出现为我们前端带来了很多方便之处,以 ...
    
			
    6. 
						
  6. Java知识体系框架
			
    前言:自从出生,每个人都是一个学习者或探索者.永远保持一颗谦逊的心态,遵循一定的方法和规范,去学习和实践,永远记得走走停停,多回头看看自己走过的路,温故而知新,也能更好地指导未来的路怎么走(同样,本篇 ...
    
			
    7. 
						
  7. Appium自动化测试框架研究(2)——搭建IOS环境
			
    今天的文章讲iOS的Appium环境搭建. 对于iOS而言,只能在Mac笔记本上安装Appium,以及所需要的各种组件. 也许有人会问,能否在Windows系统上使用Appium测试iOS手机,这不就 ...
    
			
    8. 
						
  8. 一起来学习XPATH，来看看除了正则表达式我们还能怎么抓取数据
			
    参考学习的网站链接http://www.w3school.com.cn/xpath/xpath_intro.asp 首先理清楚一些常识 以此为例 <?xml version="1.0& ...
    
			
    9. 
						
  9. python IO非阻塞模型
			
    server端 import socket sk = socket.socket() sk.bind(('127.0.0.1', 8010)) sk.setblocking(False) # sk.l ...
    
			
    10. 
						
  10. Codeforces940掉分记
			
    掉分经过 难得这次时间比较好,下午17:35开始. 本来还很高兴,心想这回肯定不会犯困,没准排名能再上升一些呢,,可惜事与愿违-- 上来a题,光看懂题就花了一些时间. 然后开始写,结果第一遍CE,第二 ...
    
			
    11.