javascript - KnockoutJS - 模板上的点击事件

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>

和以下模型 View :

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

self.contacts = contacts;

self.test= function () {
    console.log("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 公开了一组您绑定(bind)到 contactsTemplate 模板的联系人。因此，此模板中所有绑定(bind)的“上下文”是数组中的对象实例。要绑定(bind)到父对象(即 contactViewModel)上的函数，请使用 Knockout 2.0 父伪变量:

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