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. Spring Boot中@Scheduled注解的使用方法
			
    Spring Boot中@Scheduled注解的使用方法 一.定时任务注解为@Scheduled,使用方式举例如下 //定义一个按时间执行的定时任务,在每天16:00执行一次. @Scheduled ...
    
			
    2. 
						
  2. 顺丰丰桥软件开发工具包 (.NET)
			
    丰桥 - 一站式对接服务平台, 打通客户与顺丰系统之间的信息流, 实现物流供应链一体化. 随着一个电商项目和顺丰合作, 信息流对接就是我们开发的事了. 顺丰通过丰桥提供了一些开放接口, 不过丰桥提供的 ...
    
			
    3. 
						
  3. 1z0-062 题库解析1
			
    You configured the Fast Recovery Area (FRA) for your database. The database instance is in archivelo ...
    
			
    4. 
						
  4. Java 中的四种权限修饰符
			
    * * private: * Java语言中对访问权限限制的最窄的修饰符,一般称之为“私有的”. * 被其修饰的属性以及方法只能被该类的对象 访问,其子类不能访问,更不能允许跨包访问. * * def ...
    
			
    5. 
						
  5. 你还不会Git？那就不要写代码了（一）
			
    Git应用开发学习 如果你还不会使用Git,那就不要写代码了. 一旦你会使用了Git,就再也不想使用SVN了.永远也回不去了. Mac上使用Git,肯定离不开对Mac上的操作.就要使用常用的Linux ...
    
			
    6. 
						
  6. Redis-缓存穿透、缓存雪崩、缓存击穿、缓存一致性、并发竞争
			
    缓存流程 在讲这五个问题之前,首先我们回顾下正常的缓存的使用流程 程序在处理请求时,会先从缓存中进行查询,如果缓存中没有对应的key,则会从数据库中查询,如果查询到结果,并将查询结果添加到缓存中去,反 ...
    
			
    7. 
						
  7. Java标签学习
			
    今天早上看Java编程思想第四章控制执行流程,本来很简单的一些东西,但是突然看到了goto发现自己以前还真的没怎么用过,不过Java中对goto作为保留关键字,而是提供了一个叫标签的东西,我们一起来看 ...
    
			
    8. 
						
  8. 测试必备之Java知识（四）—— 线程相关
			
    线程相关 Java多线程实现方式 继承Thread,实现Runnable接口,实现Callable接口(能抛异常且有返回值,不常用) 为什么有了继承Thread方式还要有Runnable接口方式 实现 ...
    
			
    9. 
						
  9. NMI计算
			
    NMI计算 NMI(Normalized Mutual Information)标准化互信息,常用在聚类中,度量两个聚类结果的相近程度.是社区发现(community detection)的重要衡量指 ...
    
			
    10. 
						
  10. 关于爬虫的日常复习（10）—— 实战：使用selenium模拟浏览器爬取淘宝美食
			
    
			
    11.