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绑定：

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

这是预期的行为吗？
如果是，如何在仍然使用with binding的情况下在addNewPerson方法中访问我的主模块？

Answer 1

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

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

您可以使用bind function（如果您的浏览器不支持它，则Knockout附带自己的版本）将this的值修复为您视图中的父对象：

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

或者您可以在viewmodel级别执行相同操作（由于原型的使用，语法看起来有点滑稽）：

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

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

您还可以查看Ryan Niemeyer的精彩视频：devLink 2013 - Knockout.js Tips and Tricks其中第二个提示是关于控制“此”

如何在敲除js中使用'with'进行数据绑定后访问另一个原型对象

1 个答案: