免費AI編程助手
Kendo MVVM (一) 概述
Kendo MVVM (一) 概述
Model View ViewModel (MVVM) 是開發(fā)人員經(jīng)常使用的一種設計模式，以實現(xiàn)數(shù)據(jù)模型（Model）和視圖（View）的分離。MVVM 中的 ViewModel 部分負責把模型中的數(shù)據(jù)對象以某種方便的形式和 View 結(jié)合起來（通常是通過數(shù)據(jù)綁定的方式）。
Kendo MVVM 實現(xiàn)了 MVVN 設計模式，并且支持和 Kendo 框架的其它部分（如UI組件和數(shù)據(jù)源）的無縫連接。
準備開始
使用 MVVM 模式首先創(chuàng)建 ViewModel 對象，ViewModel 對象代表了可以使用 View 顯示的數(shù)據(jù)對象，Kendo 框架中使用 kendo.observable 函數(shù)通過傳入 JavaScript 對象的方法來定義一個 ViewModel 對象。比如：
var viewModel = kendo.observable({
name: "John Doe",
displayGreeting: function() {
var name = this.get("name");
alert("Hello, " + name + "!!!");
}
});
然后使用 HTML 創(chuàng)建一個 View，這個 View 包含一個按鈕和一個文本框。
<div id="view">
<input data-bind="value: name" />
<button data-bind="click: displayGreeting">Display Greeting</button>
</div>
其中文本框(input) 通 過data-bind 屬性指明綁定到 ViewModel 對象的 name 域。 此時 name 域值發(fā)生變化將會反映到 UI 界面的 Input 輸入框內(nèi)容的變化。反之亦然，當 UI 輸入框內(nèi)容發(fā)生變化時，ViewModel 的 name 域也發(fā)生變化。 按鈕的 click 事件綁定到 ViewModel 的 displayGreeting 方法。
最后，通過 bind 方法將 View 和 ViewModel 綁定起來。
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://atts.w3cschool.cn/attachments/image/wk/kendouidevelopmenttutorial/jquery.min.js"></script>
<script src="https://atts.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>
數(shù)據(jù)綁定
數(shù)據(jù)綁定將 DOM 元素（或者 UI 組件）的屬性綁定到 ViewModel 的某個屬性或是方法。綁定通過設置 data-bind 屬性，采用 “綁定名稱 ： ViewModel 的屬性或方法”的格式，也就是 value : name 的形式來指明。上面的例子使用了兩種不同類型的綁定，value 和 click。 Kendo MVVM 也支持其它類型的綁定，如 source, html, attr ,visible,enable 等。 data-bind 也可以支持通過逗號分隔的屬性列表。 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>
要實現(xiàn)上面使用小寫的功能，可以使用下面的實現(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>
更多建議：