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. Ceph 文件系统-全网最炫酷的Ceph Dashboard页面和Ceph监控 -- <5>
			
    Ceph Dashboard实现 Ceph Dashboard介绍 Ceph 的监控可视化界面方案很多----grafana.Kraken.但是从Luminous开始,Ceph 提供了原生的Dashb ...
    
			
    2. 
						
  2. C# 删除指定文件
			
    using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Text;us ...
    
			
    3. 
						
  3. vue将接口返回的日期实时转换为几分钟前、几小时前、几天前
			
    项目开发中,各种需求都会遇到,有些需求很合理,也好实现,有些需求不能说不合理,就是太麻烦,就比如类似标题所描述这种的需求,你不能说它是不合理的需求,因为很多论坛或微博.朋友圈.QQ空间之类的这种效果还 ...
    
			
    4. 
						
  4. “云”端的语雀：用 JavaScript 全栈打造商业级应用
			
    作者|  不四(死马)蚂蚁金服 语雀产品技术负责人 语雀是什么? 语雀是一个专业的云端知识库,面向个人和团队,提供与众不同的知识管理,打造轻松流畅的工作协同,它提供各种格式的在线文档(富文本.表格.设 ...
    
			
    5. 
						
  5. 幽灵java进程引起的: FATAL ERROR in native method
			
    FATAL ERROR in native method: JDWP No transports initialized, jvmtiError=AGENT_ERROR_TRANSPORT_INIT( ...
    
			
    6. 
						
  6. go微服务框架kratos学习笔记七(kratos warden 负载均衡 balancer)
			
    目录 go微服务框架kratos学习笔记七(kratos warden 负载均衡 balancer) demo demo server demo client 池 dao service p2c ro ...
    
			
    7. 
						
  7. scrapy框架安装及创建
			
    介绍:大而全的爬虫组件 使用Anaconda conda install -c conda-forge scrapy 一.安装: windows 1.下载 https://www.lfd.uci.ed ...
    
			
    8. 
						
  8. xlwings excel（三）
			
    App相当于Excel程序,Book相当于工作簿.N个Excel程序则由apps表示,N个工作簿由books表示. 对工作簿的操作 #导入xlwings模块 import xlwings as xw  ...
    
			
    9. 
						
  9. Creating Custom Helper Methods 创建自定义辅助器方法----辅助器方法  ------ 精通ASP.NET MVC 5
			
    创建内联的辅助器方法 和 拓展方法 好像类似的功能. 不过写在前台更直观
    
			
    10. 
						
  10. Kdenlive-开始
			
    版权声明:原创文章,未经博主允许不得转载 这是 Kdenlive 系列文章的第一篇 说明 在 Linux 下的视频编辑的软件并不多,作为其中之一的 kdenlive 在网上的教程就更少了.于是自己琢磨 ...
    
			
    11.