13

在我的视图模型中,我有原型方法,其中this上下文是 for each 中的项目,而不是实际的视图模型。我如何实现这一目标?

  <button data-bind="click: $parent.methodThatNeedsAccesToTheParentViewModel">Edit</button>

视图模型:

ViewModel.prototype.methodThatNeedsAccesToTheParentViewModel= function () {
        this = duff //this is the item in the foreach, not the real parent
    };

想法?

4

3 回答 3

14

不要将函数直接传递给单击绑定,将其包装在匿名函数中以在视图模型的上下文中调用它:

<button data-bind="click: function() { $parent.methodThatNeedsAccesToTheParentViewModel() }">Edit</button>

这样,当绑定被激活时,它将使用 $parent 作为调用的上下文 - 即this

值得注意的是(因为我们看不到文件绑定的结构)$parent变量将引用当前正在迭代的项目之前的绑定,它不一定是对象图中项目的父项。

编辑:我在上面遗漏了一些括号......

编辑2:由于绑定的解决方式,这有效。当通过敲除应用绑定时,表达式被解析并且必须评估为函数(因此当您直接绑定到函数时不需要括号)。然后在激活点击绑定时调用此函数。

但这里有一个问题,因为原型 javascript 中的this关键字不受函数所有者的约束(即它被定义的地方),而是在这种情况下被调用的方式(如mozilla 文档中更好地解释)淘汰调用该函数不是通过拥有它的对象(这将正确绑定this运算符),而是将其显式绑定到其当前绑定上下文(因为它不可能知道该函数最初是哪个实例)。您可以通过获取对您的函数的引用然后在调用时将其绑定到另一个对象来复制此行为 - 例如:

A = function() {
   this.name = "foo";
};
A.prototype.getName = function() { return this.name; };

a = new A();

console.log(a.getName()); // should log "foo" as expected

f = a.getName; // now f contains a reference to the function

console.log(f()); // this call the function in the current scope - most likely the window, and return nothing

b = new Object(); // another generic object - suppose this is knockout binding context

console.log(f.call(b)); // this bind the call explicitly to b, but since b has no name property,  nothing is returned again

console.log(f.call(a)); // this time we bind the function call to an object that has a name proerty, so the correct value is returned

另一方面,通过创建一个匿名函数,您将在所需对象($parent)的范围内显式调用您的方法,因此是正确绑定的。

我希望这会有所帮助... :)

于 2013-03-06T16:36:48.410 回答
9

我遇到了同样的问题,我以这种方式解决了它:

<button data-bind="click: $parent.methodThatNeedsAccesToTheParentViewModel.bind($parent)">Edit</button>
于 2013-06-12T11:33:43.790 回答
0

您的数据绑定中有 $parent ,因此应该调用父级的方法。您的意思是将 $data.methodThatNeedsAccesToTheParentViewModel 作为数据绑定吗?如果你这样做了,那么你需要研究某种 pubsub 框架,要么是淘汰邮箱,要么是jquery pubsub 插件

于 2013-03-06T16:31:33.823 回答