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. es snapshot备份到hdfs及从hdfs恢复snapshot
			
    snapshot可以将es整个集群,具体索引数据备份到磁盘,hdfs等.需要时,可以从磁盘,hdfs恢复数据到es. 具体参考: https://elasticsearch.cn/article/61 ...
    
			
    2. 
						
  2. 【Spark 内核】 Spark 内核解析-下
			
    Spark内核泛指Spark的核心运行机制,包括Spark核心组件的运行机制.Spark任务调度机制.Spark内存管理机制.Spark核心功能的运行原理等,熟练掌握Spark内核原理,能够帮助我们更 ...
    
			
    3. 
						
  3. css3实现左右div高度自适应且内容居中对齐
			
    主要运用了css3的弹层布局,直接上代码: 效果:左边盒子宽度固定.内容居中对齐.与右侧盒子高度相等,右侧自动缩放 html: <div class="main"> & ...
    
			
    4. 
						
  4. javalite 使用druid数据库连接池配置
			
    在pom文件中引入jar包 <dependency> <groupId>com.alibaba</groupId> <artifactId>druid& ...
    
			
    5. 
						
  5. IDEA不编译空文件夹
			
    今天做项目的时候发现idea编译工程不会编译空文件夹,在resources下新建了个存储文件的空文件夹,编译后target里竟然没有,一直报空指针. 随便丢一个文件进去就行了,放一个demo.txt的 ...
    
			
    6. 
						
  6. hive 动态分区
			
    非常重要的动态分区属性: hive.exec.dynamic.partition  是否启动动态分区.false(不开启) true(开启)默认是 false hive.exec.dynamic.pa ...
    
			
    7. 
						
  7. hadoop 基础
			
    common 一组分布式文件系统和通用I/O的组件与接口(序列化.java RPC和持久化数据结构) Avro 一种支持高效.跨语言的RPC以及永久存储数据的序列化系统 MapReduce 分布式数据 ...
    
			
    8. 
						
  8. 前端笔记6-js2
			
    1.break 和continue用法 break结束本次循环,如果想结束外层循环,可以通过这个label来指定要结束的循环. continue可以用来跳过当次循环,如果想跳过外次循环,也可以通过这个 ...
    
			
    9. 
						
  9. 洛谷p1137 模拟退火
			
    题目链接:https://www.luogu.org/problem/P1337 以x为原点,将力分解成横纵方向的力,每次退火时单独对答案的横纵坐标进行判断是否更新答案 #include<ios ...
    
			
    10. 
						
  10. C++ 链式继承下的虚函数列表
			
    目录 1.虚函数列表的位置 2.虚函数列表的内容 3.链式继承中虚函数列表的内容   注: 虚函数列表 又称为虚表, vtbl , 指向它的指针称为vptr, vs2019中称为__vfptr 操作系 ...
    
			
    11.