1

我正在使用 knockoutjs 并有一个像这样的对象：

var home = function(){
    this.title = 'Home',
    this.vm = {
        names: ko.observableArray(),
        metadata: {
            startDate: ko.observableArray()
        }
    }
};

home.prototype.create = function(){
   alert('creating');
};

home.prototype.addNewPerson = function(){
    alert(this);
    this.create();
};

return home;

然后在我的 HTML 中，我使用with绑定：

<div data-bind='with: vm.metadata'>
    <input data-bind='value: startDate' />
    <button data-bind='click: $parent.addNewPerson />
</div>
  • 这不是我的确切代码，而是简化版本

当用户在这种情况下单击按钮时，this将是我的元数据对象。所以我会得到一个未定义的错误，因为元数据没有创建方法。

如果我不使用with绑定而是像这样绑定： <input data-bind='value: vm.metdatadata().startDate'/>

然后当用户点击时，我得到了我的整个对象，我可以调用this.create();

  1. 这是预期的行为吗？
  2. 如果是，我如何在 addNewPerson 方法中访问我的主模块，同时仍然使用 with 绑定？
4

1 回答 1

1

这是click绑定的预期行为：this将设置当前的“项目”，因此在您的情况下为metadata对象。

有多种方法可以解决这个问题：

您可以使用bind函数（如果您的浏览器不完全支持，则 Knockout 带有自己的版本）来修复this视图中父对象的值：

<div data-bind='with: vm.metadata'>
    <input data-bind='value: startDate' />
    <button data-bind='click: $parent.addNewPerson.bind($parent) />
</div>

或者你可以在你的视图模型级别做同样的事情（由于原型的使用，语法看起来有点滑稽）：

var home = function(){
    this.title = 'Home',
    this.vm = {
        names: ko.observableArray(),
        metadata: {
            startDate: ko.observableArray()
        }
    }
    this.addNewPerson = this.addNewPerson.bind(this);
};


home.prototype.addNewPerson = function(){
    alert(this);
    this.create();
};

或者您可以使用文章中描述的事件委托模式：Revising Event Delegation in Knockout.js

您还可以查看 Ryan Niemeyer 的精彩视频：devLink 2013 - Knockout.js Tips and Tricks其中第二个技巧是关于控制“this”</p>

于 2013-09-30T15:16:14.960 回答