Model View ViewModel (MVVM) 是開(kāi)發(fā)人員經(jīng)常使用的一種設(shè)計(jì)模式，以實(shí)現(xiàn)數(shù)據(jù)模型（Model）和視圖（View）的分離。MVVM 中的 ViewModel 部分負(fù)責(zé)把模型中的數(shù)據(jù)對(duì)象以某種方便的形式和 View 結(jié)合起來(lái)（通常是通過(guò)數(shù)據(jù)綁定的方式）。

Kendo MVVM 實(shí)現(xiàn)了 MVVN 設(shè)計(jì)模式，并且支持和 Kendo 框架的其它部分（如UI組件和數(shù)據(jù)源）的無(wú)縫連接。

準(zhǔn)備開(kāi)始

使用 MVVM 模式首先創(chuàng)建 ViewModel 對(duì)象，ViewModel 對(duì)象代表了可以使用 View 顯示的數(shù)據(jù)對(duì)象，Kendo 框架中使用 kendo.observable 函數(shù)通過(guò)傳入 JavaScript 對(duì)象的方法來(lái)定義一個(gè) ViewModel 對(duì)象。比如：


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

然后使用 HTML 創(chuàng)建一個(gè) View，這個(gè) View 包含一個(gè)按鈕和一個(gè)文本框。


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

其中文本框(input) 通過(guò)data-bind 屬性指明綁定到 ViewModel 對(duì)象的 name 域。此時(shí) name 域值發(fā)生變化將會(huì)反映到 UI 界面的 Input 輸入框內(nèi)容的變化。反之亦然，當(dāng) UI 輸入框內(nèi)容發(fā)生變化時(shí)，ViewModel 的 name 域也發(fā)生變化。按鈕的 click 事件綁定到 ViewModel 的 displayGreeting 方法。

最后，通過(guò) bind 方法將 View 和 ViewModel 綁定起來(lái)。

kendo.bind($("#view"), viewModel); 完整的代碼如下：


<!doctype html>
<html>
<head>
    <title>Kendo UI Web</title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.web.min.js"></script>

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

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

     kendo.bind($("#view"), viewModel);
 </script>
</body>
</html>

數(shù)據(jù)綁定

數(shù)據(jù)綁定將 DOM 元素（或者 UI 組件）的屬性綁定到 ViewModel 的某個(gè)屬性或是方法。綁定通過(guò)設(shè)置 data-bind 屬性，采用 “綁定名稱(chēng) ： ViewModel 的屬性或方法”的格式，也就是 value : name 的形式來(lái)指明。上面的例子使用了兩種不同類(lèi)型的綁定，value 和 click。 Kendo MVVM 也支持其它類(lèi)型的綁定，如 source, html, attr ,visible,enable 等。 data-bind 也可以支持通過(guò)逗號(hào)分隔的屬性列表。 Kendo MVVM 數(shù)據(jù)綁定也支持嵌套的 ViewModel 屬性。

比如下例把 div 綁定到 person.name:


<div data-bind="text: person.name">
</div>
<script>
var viewModel = kendo.observable({
    person: {
        name: "John Doe"
    }
});
kendo.bind($("div"), viewModel);
</script>

要注意的是 data-bindings 的值不是 Javascript 代碼，不可以使用在 data-bindings 中使用 javascript 方法，比如


<div data-bind="text: person.name.toLowerCase()"></div>

要實(shí)現(xiàn)上面使用小寫(xiě)的功能，可以使用下面的實(shí)現(xiàn)：

<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>

上一篇：Kendo MVVM 數(shù)據(jù)綁定(一) attr下一篇：Kendo MVVM 數(shù)據(jù)綁定(十) Source

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

Kendo MVVM (一) 概述

準(zhǔn)備開(kāi)始

數(shù)據(jù)綁定