如何在淘汰视图模型点击事件中访问 $parent 或 $parents[]？答案

【问题标题】：How to access $parent or $parents[] in knockout viewmodel click event?如何在淘汰视图模型点击事件中访问 $parent 或 $parents[]？
【发布时间】：2016-10-22 02:19:51
【问题描述】：

我有一种情况，我想通知祖父母或 $parents[1] 子视图模型中发生的点击事件。所以基本上我希望能够做到这一点

self.$parents[1].actionTaken

我认为这不起作用，因为绑定上下文与视图模型，但我想听听是否有人对执行此类操作的正确方法有想法。谢谢

 self.save = function () {

     //do stuff to self first, then

      self.$parents[1].actionTaken();

};

【问题讨论】：

标签： knockout.js

【解决方案1】：

或使用bind 技巧

data-bind="click: $parent.foo.bind($parent)"

现在，当您访问 foo 函数时，this 关键字将指向父上下文。

foo: function(child) {
   this.children.remove(child);
}

【讨论】：

阅读和功能比接受的答案更好（对我来说）。
帮我解决了一个问题。我必须有权访问ViewModel 和$data。这个data-bind="click: $parent.foo.bind($parent, $data)" 为我解决了这个问题。谢谢你的分享:)。

【解决方案2】：

或者，您可以通过以下方式将参数传递给视图模型的事件处理程序：更改您的save 方法

self.save = function(theParents) {
    theParents[1].actionTaken();
}

并通过以下方式绑定您的处理程序：

data-bind="click: function() { $data.save($parents) }"

更多信息请参考Note 2 in the click handler's documentation（你需要往下一点）

【讨论】：

【解决方案3】：

现在（使用knockout 3.0.0）只需向子函数添加两个参数（由点击绑定执行），第一个将被分配当前视图模型，第二个将被分配点击事件参数。

然后调用 ko.contextFor() 并传递事件目标，您将可以通过上下文对象访问 $parent。

this.myChildFunction = function (vm, e) {
  var context = ko.contextFor(e.target);
  context.$parent.myParentFunction();
};

（不知道在其他答案期间这是否可能......）

【讨论】：

【解决方案4】：

实际上，action 是在 knockoutjs 世界中的 viewmodel 中定义的。 $parents/$data 是“上下文”。我创建了一个数据结构来展示您的需求。公司 > 销售部门 > 员工

您可以在这个 jsfiddle 示例中找到它： invoke root action in child event

如果您出于某种原因仍想这样做，您还可以在祖父母的 context 中定义 actionTaken() 函数（不是作为视图模型方法）。但这可能不是通常的方式。不管怎样，看看这个：

self.company={name:'ABC', click:function(){self.onCompClicked();}, salesDepartment:{manager:'Mgr',employees:['Smith','John']}};

然后将绑定点击事件改成这样：

data-bind="text: $data, click: $parents[1].click"

第二版的更新代码在这里： invoke context action in child event

【讨论】：