this 不引用从 observableArray 模板绑定的视图模型答案

【问题标题】：this does not refer to viewmodel in binding from observableArray templatethis 不引用从 observableArray 模板绑定的视图模型
【发布时间】：2012-02-14 01:48:36
【问题描述】：

尝试在 Knockout 2 中使用新的 cleaner event handling 以及新的控制流绑定，我正在努力实现一个简单的动态列表，添加和删除字符串。所以我的标记大致是这样的：

<div data-bind="foreach:myList">
    <input data-bind="value: $data" />
    <button data-bind="click:$parent.removeFromList">X</button>
</div>

我的视图模型有一个匹配的删除函数，它模仿a sample from Steve Sanderson。

removeFromList: function(item) {
    this.myList.remove(item);
}

现在我希望 'this' 指代视图模型，而 item 指代被删除的数组成员（因为 event handlers now receive the current model value as their first parameter）。但是，“this”似乎也指的是要删除的字符串。因此，当我单击删除时，我得到：

this.myList is undefined

我在http://jsfiddle.net/davidc/rFd7H/ 创建了一个JSFiddle，它说明了我的问题。我应该如何从列表中删除项目？

【问题讨论】：

文档说该函数获取当前模型值作为其参数，但它没有说明this 绑定的内容。显然，它绑定到相同的东西（嗯，绑定到从数组中的字符串原语实例化的 String 对象）。我同意那很蹩脚。但是，我不确定 Knockout 如何知道将 this 绑定到 $parent ...
好的，文档没有说 'this' 绑定到 $parent 但来自 Steve Sanderson 的 blog post 在相同的场景中使用它。
该示例使用 2.0 之前的内联事件处理程序代码，而不是新的东西。

标签： javascript knockout.js

【解决方案1】：

有很多方法可以确保您的处理程序具有正确的“this”值。

在函数中构建您的视图模型，并针对当前的 this 使用 bind 示例：http://jsfiddle.net/rniemeyer/rFd7H/4/。或者不要在函数中构建您的视图模型并使用bind，例如：http://jsfiddle.net/rniemeyer/rFd7H/10/
在函数中构建您的视图模型，并保留一个具有正确值this 的变量，并在您的处理程序中使用它。示例：http://jsfiddle.net/rniemeyer/rFd7H/5/
在您的绑定中绑定到正确的上下文，例如：data-bind="click: $parent.removeFromList.bind($parent)" 示例：http://jsfiddle.net/rniemeyer/rFd7H/8/
将其作为$parent 对象之外的匿名函数调用，例如：data-bind="function() { $parent.removeFromList($data); }" 通常不推荐，因为它会使标记变得丑陋/冗长。示例：http://jsfiddle.net/rniemeyer/rFd7H/9/

【讨论】：

谢谢 - 这似乎解决了“这个”问题。但是，这仍然不太奏效。选择您的选项 1B，我认为这是对现有代码最干净的修改（保留现有对象文字但使用绑定）-jsfiddle.net/rniemeyer/rFd7H/10。 Remove 现在得到正确的“this”，但对于使用 addToList 函数创建的项目，“item”设置不正确，并且所有新行都被删除。单击“新建”几次，然后删除其中一个新行，它们都会消失。有什么想法吗？
Knockout 无法写入数组中的原始值。因此，对您的价值观所做的任何更改实际上都不会写在任何地方。这意味着新的值总是“”。 remove 函数将删除所有匹配项。在这种情况下，它是所有新项目。您需要执行以下操作：jsfiddle.net/rniemeyer/rFd7H/11
谢谢。那个 Knockout 不能将原始值写入数组真的应该是in the documentation！很高兴知道。