• KendoUI>Framework>MVVM>Overview


    Model View View-Model是一种设计模式来帮助开发者更好地对数据层Model和视图层View进行分层。View-Model层 负责 暴露Model层和View层交互的数据。

    Kendo MVVM是一种MVVM的实现,当然可以跟Kendo 组件(widgets)和数据源(datasource)进行无缝结合。

    首先,

    我们要创建一个View-Model对象,View-Model对象根据你的Model数据产生。具体做法就是,传入一个JS对象到Kendo.observable方法。

    var viewModel = kendo.observable({
        name: "John Doe",
        displayGreeting: function() {
            var name = this.get("name");
            alert("Hello, " + name + "!!!");
        }
    });

    然后,我们创建View,View就是一些html元素,用来绑定View-Model。

    <div id="view">
        <input data-bind="value: name" />
        <button data-bind="click: displayGreeting">Display Greeting</button>
    </div>
       

    从代码里,我们可以看到input元素的value属性跟View-Model的name字段绑定。于是,当View-Model的name字段的值发生改变时,input元素的value值也随着改变。反之,input元素的value值发生改变,View-Model的name字段的值也随着发生变化。而且变化是实时的哦。

    我们还看到,button元素的click事件与View-Model的dispalyGreeting方法发生绑定。于是,当你点击button时,便调用displayGreeting方法。

    最后,我们把View和View-Model进行绑定。

    kendo.bind($("#view"), viewModel);

    关于绑定:

    绑定格式,<binding name>: <view model field or method> ,当然你也可以绑定html元素的其他属性,source, html, attr, visible, enabled等等。当然你可以连续绑定多个html元素,比如

    data-bind="value: name, visible: isNameVisible"。或者这样绑定:
    <div data-bind="text: person.name"></div>
    <script>
        
    var viewModel = kendo.observable({
            person: {
                name: 
    "John Doe"
            }
        });
        kendo.bind($(
    "div"), viewModel);
    </script>
       

    注意点:

    不要这样绑定,<div data-bind="text: person.name.toLowerCase()"></div>,这是html,不是javascript。要实现这个目的,请这样。

    <div data-bind="text: person.lowerCaseName"></div>

    <script>
        
    var viewModel = kendo.observable({
            person: {
                name: 
    "John Doe",
                lowerCaseName: 
    function() {
                    
    return this.get("name").toLowerCase();
                }
            }
        });
        kendo.bind($(
    "div"), viewModel);
    </script>


    合乎自然而生生不息。。。
  • 相关阅读:
    QuickClip—界面原型设计
    视频剪辑软件调研分析及使用感受——后附作品地址
    《梦断代码》——理智上悲观,意志上乐观
    《人月神话》—危险的神话
    zabbix监控交换机
    linux常用经典命令
    zabbix使用tokudb引擎替换innodb引擎
    CART分类回归树算法
    朴素贝叶斯分类算法
    分布式系统阅读笔记(十三)-----命名服务
  • 原文地址:https://www.cnblogs.com/samwu/p/2432855.html
Copyright © 2020-2023  润新知