Kendo MVVM (一) 概述

時間 2020-06-03

標籤 kendo mvvm 概述简体版

原文原文鏈接

Kendo MVVM (一) 概述

Model View ViewModel (MVVM) 是開發人員常用的一種設計模式，以實現數據模型（Model）和視圖（View）的分離。MVVM 中的 ViewModel 部分負責把模型中的數據對象以某種方便的形式和 View 結合起來（一般是經過數據綁定的方式）。javascript

Kendo MVVM 實現了 MVVN 設計模式，而且支持和 Kendo 框架的其它部分（如UI組件和數據源）的無縫鏈接。css

準備開始

使用 MVVM 模式首先建立 ViewModel 對象，ViewModel 對象表明了能夠使用 View 顯示的數據對象，Kendo 框架中使用 kendo.observable 函數經過傳入 JavaScript 對象的方法來定義一個 ViewModel 對象。好比： html

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

而後使用 HTML 建立一個 View，這個 View 包含一個按鈕和一個文本框。 java

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

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

最後，經過 bind 方法將 View 和 ViewModel 綁定起來。web

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="https://7n.w3cschool.cn/attachments/image/wk/kendouidevelopmenttutorial/jquery.min.js"></script>
    <script src="https://7n.w3cschool.cn/attachments/image/wk/kendouidevelopmenttutorial/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>

數據綁定

數據綁定將 DOM 元素（或者 UI 組件）的屬性綁定到 ViewModel 的某個屬性或是方法。綁定經過設置 data-bind 屬性，採用「綁定名稱： ViewModel 的屬性或方法」的格式，也就是 value : name 的形式來指明。上面的例子使用了兩種不一樣類型的綁定，value 和 click。 Kendo MVVM 也支持其它類型的綁定，如 source, html, attr ,visible,enable 等。 data-bind 也能夠支持經過逗號分隔的屬性列表。 Kendo MVVM 數據綁定也支持嵌套的 ViewModel 屬性。框架

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

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

要實現上面使用小寫的功能，能夠使用下面的實現：

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。