javascript - 在knockout js中使用 'with'进行数据绑定(bind)后如何访问另一个原型(prototype)对象

Question

我正在使用 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绑定(bind):

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

• 这不是我的确切代码，而是简化版本

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

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

然后，当用户单击时，我会获取整个对象，并且可以调用 this.create();

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

Answer 1

这是 click 绑定(bind)的预期行为:this 将设置为当前“item”，因此在您的情况下为 metadata 对象.

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

您可以使用bind function (如果您的浏览器不完全支持，Knockout 有自己的版本)将 this 的值固定为 View 中的父对象:

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

或者您可以在 View 模型级别执行相同的操作(由于原型(prototype)的使用，语法看起来有点有趣):

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();
};

或者您可以使用文章中描述的事件委托(delegate)模式:Revisting Event Delegation in Knockout.js

您还可以观看 Ryan Niemeyer 的精彩视频:devLink 2013 - Knockout.js Tips and Tricks第二个技巧是关于控制“这个”