我有以下Kendo UI MVVM。这里的业务函数是在viewModel中编写的。我们如何将这些函数移到不同的文件中？
我面临的挑战是由于这些函数中的“this”关键字，它指的是可观察对象中存在的模型。
查看模型
<script type="text/javascript">
var viewModel = kendo.observable({
// model definition
employees: [
{ name: "Lijo", age: "28" },
{ name: "Binu", age: "33" },
{ name: "Kiran", age: "29" }
],
personName: "",
personAge: "",
//Note: Business functions does not access any DOM elements using jquery.
//They are referring only the objects in the view model.
//business functions (uses "this" keyword - e.g. this.get("employees"))
addEmployee: function () {
this.get("employees").push({
name: this.get("personName"),
age: this.get("personAge")
});
this.set("personName", "");
this.set("personAge", "");
},
deleteEmployee: function (e) {
//person object is created using "e"
var person = e.data;
var employees = this.get("employees");
var index = employees.indexOf(person);
employees.splice(index, 1);
}
});
</script>
磁头
<head>
<title>MVVM Test</title>
<script type="text/javascript" src="lib/kendo/js/jquery.min.js"></script>
<script type="text/javascript" src="lib/kendo/js/kendo.web.min.js"></script>
<!----Kendo Template-->
<script id="row-template" type="text/x-kendo-template">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: age"></td>
<td><button type="button" data-bind="click: deleteEmployee">Delete</button></td>
<td>
</tr>
</script>
<!--MVVM Wiring using Kendo Binding-->
<script type="text/javascript">
$(document).ready(function () {
kendo.bind($("body"), viewModel);
});
</script>
</head>
机身
<body>
<table>
<thead>
<tr>
<th>
Name
</th>
<th>
Age
</th>
</tr>
</thead>
<!--The data-template attribute tells Kendo UI that the employees objects should be formatted using a Kendo UI template. -->
<tbody data-template="row-template" data-bind="source: employees">
</tbody>
</table>
<br />
<br />
<form>
<input type="text" name="personName" placeholder="Name" data-bind="value: personName" /><br />
<input type="text" name="personAge" placeholder="Age" data-bind="value: personAge" /><br />
<button type="button" data-bind="click: addEmployee">
Add</button>
</form>
</body>
参考
- 剑道MVVM框架-packtpub
- MVVM/远程绑定--demos.telerik
- DropDownList/MVM-demos.telerik
- 数据源/基本用法
无论您是在另一个javascript文件中定义它，还是在剑道.observable函数之外定义它，您只需要将"this"绑定到函数即可。
这是未经测试的，但第一个可能有效，而第二个肯定有效！
function externalAddEmployee() {
this.get("employees").push({
name: this.get("personName"),
age: this.get("personAge")});
this.set("personName", "");
this.set("personAge", "");
}
kendo.observable({
// first solution: may not work because the 'this' you want is not properly defined
addEmployee: externalAddEmployee.bind(this);
// second solution: will work everytime
// the 'this' is properly defined, just proxy the call to the function
addEmployee: function() { return externalAddEmployee.apply(this, arguments); }
})
为了改进第二种解决方案，您甚至可以制作一个辅助功能：
function proxy(fn) { return function() { return fn.apply(this, arguments); })
// and then
kendo.observable({
addEmployee: proxy(externalAddEmployee)
})