模板中不需要 $parent 绑定答案

【问题标题】：$parent binding not required in template模板中不需要 $parent 绑定
【发布时间】：2015-07-17 02:50:04
【问题描述】：

https://jsfiddle.net/btriplett/y3p8cdby/2/ 的示例

我在淘汰赛中遇到了 $parent 标记的一些令人困惑的行为。我正在尝试根据上下文删除列表中的项目，并希望必须使用 $parent 标记来访问父视图模型的删除功能（见下文）。

这里是标记：

<ul data-bind="foreach: list">
    <li>
        <div>
            <span data-bind="text: name"></span>
            <button data-bind="click: $parent.remove">Remove</button>
        </div>
    </li>
</ul>

这是视图模型

var data = [ {name: "Bob"}, {name:"Joe"}, {name: "John"}];

function viewModel() {
    var self = this;

    self.list = ko.observableArray(data);

    self.remove = function(item){
        self.list.remove(item);
    };
};

ko.applyBindings(viewModel());

但是，这不起作用。我得到了（在具有淘汰赛 3.0 的 Chrome 中）。

Uncaught TypeError: Unable to process binding "foreach: function (){return list }"
Message: Unable to process binding "click: function (){return $parent.remove }"
Message: Cannot read property 'remove' of undefined

但是如果我删除 $parent 它会起作用！这根本不是我所期望的，因为列表项的上下文是项而不是视图模型。有谁知道这是为什么？

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

viewModel 是一个构造函数，应该使用new 调用。或者（我会推荐）将它的第一行更改为

var self = {};

并像你在这里一样调用它。

【讨论】：

按照惯例，它应该大写，是吗？
@KennethK。对，构造函数应该以大写字母开头。

【解决方案2】：

下面是一个示例，说明当您忘记对它们调用 new 时，如何使您的课程不会失败。

function ViewModel(params) {
    if (!(this instanceof ViewModel)) {
        return new ViewModel(params);
    }

    ...
}

【讨论】：