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. [JavaScript设计模式] 什么是单例模式
			
    概念 保证一个类仅有一个实例,并提供一个全局访问点 为什么要用单例模式 想象一下某些web应用,当点击登录按钮时,会弹出一个登录框,无论你点击多少次这个登录按钮,登录框都只会出现一个,不会出现多个登录 ...
    
			
    2. 
						
  2. rabbitmq系列（二）几种常见模式的应用场景及实现
			
    一.简单模式 原理:生产者将消息交给默认的交换机,交换机获取消息后交给绑定这个生产者的队列(投递规则为队列名称和routing key 相同的队列),监听当前队列的消费者获取信息并执行消费逻辑. 场景 ...
    
			
    3. 
						
  3. Js 数组按数量分部！
			
    使用 reduce 将数组分为几个部分,每个部分最多10个! 相比其他语言使用 js  实现这个逻辑非常的简单方便! var group = function (source, step) { if  ...
    
			
    4. 
						
  4. 微信小程序点击图片放大
			
    WXML: <view class='imgList'> <view class='imgList-li' wx:for='{{imgArr}}'> <image cla ...
    
			
    5. 
						
  5. 阿里开源服务发现组件 Nacos快速入门
			
    最近几年随着云计算和微服务不断的发展,各大云厂商也都看好了微服务解决方案这个市场,纷纷推出了自己针对微服务上云架构的解决方案,并且诞生了云原生,Cloud Native的概念. 云原生是一种专门针对云 ...
    
			
    6. 
						
  6. win10内存泄漏怎么办
			
    我的电脑莫名的内存占用越来越高,但是实际内存很低 查了很多资料 下边是我找到的最有效的方法: 原因:是系统自带的网络数据监控和和Killer网卡的监控程序冲突,导致 非页面缓存无法释放. 解决方法:解 ...
    
			
    7. 
						
  7. eclipse反编译插件 jadclipse jad
			
    eclipse常用反编译插件jadclipse.jad 1.下载jadclipse:net.sf.jadclipse_3.3.0.jar,放到eclipse-plugins 2.下载jad.exe,放 ...
    
			
    8. 
						
  8. 让你的 Linux 命令骚起来
			
    目录 管道符号 " | " grep sed awk sort comm uniq tr cat head tail wc find tsort tee 「>」重定向符号 「 ...
    
			
    9. 
						
  9. playbooks框架与子文件编写规范
			
    Test Playbooks框架 ​ 详细目录testenv文件 ​ 主任务文件main.yml ​ 任务入口文件deploy.yml ​ Ansible连接playbooks需要添加ssh协议认证  ...
    
			
    10. 
						
  10. 使用ABAP Data Validator验证数据有效性
			
    在日常的开发过程中,我们常常要处理不同来源的数据.数据可能来自不可靠的外部系统.不可靠的用户输入和甚至设计有误的数据库表,因此,对数据有效性进行验证是必要的工作. 开源工具ABAP Data Vali ...
    
			
    11.