Question

我有以下KnockoutJS模板（使用jquery.tmpl渲染）：

<script id="contactsTemplate" type="text/html">
    <li data-bind="click: contactViewModel.test">${DisplayName}</li>
</script>

<ul id="contact-list" data-bind="template: {name: 'contactsTemplate', foreach:contacts}">
</ul>

和以下ModelView：

var contactViewModel = function (contacts) {
var self = this;

self.contacts = contacts;

self.test= function () {
    console.log("CLICK");
}

如果我使用此代码，则不会触发click事件。如果我创建一个匿名函数，如：

<script id="contactsTemplate" type="text/html">
    <li data-bind="click: function(){contactViewModel.test()}">${DisplayName}</li>
</script>

我得到以下例外：

Uncaught TypeError: Object function (contacts) {
 var self = this;
 self.contacts = contacts;
 self.test= function () {
     console.log("CLICK");
 }
} has no method 'test'

解

解决方案是：$ parent。

data-bind="click: $parent.test"

Answer 1

您的contactViewModel函数是构造函数，但是，您尝试将其用作通过函数构造的对象的实例。您的contactViewModel会公开您绑定到contactsTemplate模板的一系列联系人。因此，此模板中所有绑定的“上下文”是数组中的对象实例。要绑定到父对象上的函数，即contactViewModel，请使用Knockout 2.0父伪变量：

data-bind="click: $parent.test"

KnockoutJS - 模板上的Click事件

1 个答案: