淘汰赛嵌套视图模型(Knockout nested view model)

我坚持什么必须是一个简单的解决。 我使用嵌套的视图模型knockout.js，一切似乎只是我的删除功能不能正常工作的罚款。 这似乎是正确的约束力，但它是不会触发，当我点击删除。

为什么嵌套视图模型？ 说来话长，但基本上很多东西需要是在一个页面上！

因此，这里的代码：

HTML

<section class="mini-form-container">
    <form data-bind="submit: repeatGuest.addDate">
        <input type="date" data-bind="value: repeatGuest.previousStay"/>
        <button type="submit" class="button-secondary ">Add date</button>
    </form>
    <div data-bind="foreach: repeatGuest.dates, visible: repeatGuest.dates().length > 0">
        <div>
            <input data-bind="value: date" disabled="disabled"  />
            <a data-bind="click: $parent.removeDate">Remove</a>
        </div>
    </div>
</section>

<section>
    <div data-bind="text: ko.toJSON($data)"></div>
</section>

使用Javascript

function RepeatGuest() {
    /// <summary>Child View Model</summary>
    this.dates = ko.observableArray();
    this.previousStay = ko.observable();
}

RepeatGuest.prototype.addDate = function () {
        var self = this.repeatGuest;
        if (self.previousStay()) {
            self.dates.push({
                date: self.previousStay()
            });
        }
    };

RepeatGuest.prototype.removeDate = function (date) {
    this.dates.remove(date);
}

function ViewModel() {
    var self = this;
    self.repeatGuest = new RepeatGuest();
}
ko.applyBindings(new ViewModel());

这里是我的小提琴： http://jsfiddle.net/6Px4M/2/

那么，为什么不是我的删除功能被炒鱿鱼吗？

可能的副作用问题：嵌套视图模型采取淘汰赛走错了路，也似乎没有在这么多信息？

Answer 1:

一个像这样的嵌套模式工作的最佳途径是使用with约束力。 你可以做：

<div data-bind="with: repeatGuest">
   ...
</div>

现在，范围是你repeatGuest ，你可以针对其性能直接绑定。

加上您的问题remove功能与价值this和谁$parent是在那个时候。 函数具有值执行this等于当前范围。 当你的删除功能被限制，范围是在对象的一个date数组。

典型的方式来处理，这是确保你的功能势必会始终使用的正确值this 。 这可以在绑定（非常难看）来完成，如：

<a data-bind="click: $parent.repeatGuest.removeDate.bind($parent.repeatGuest)">Remove</a>

更好的选择是将其绑定在视图模型，你RepeatGuest构造函数：

this.removeDate = this.removeDate.bind(this);

这使得实现住在原型并与部队的正确值的包装将其覆盖在每个实例this 。 另外，如果你不把它的原型，那么你可以使用var self = this; 模式和使用self的处理程序。

http://jsfiddle.net/cNdJj/

Answer 2:

结合不会访问错误的原型功能。 您现在正在绑定到视图模型，不给RepeatGuest对象。

它的工作原理，如果你将其设置为本地函数：

http://jsfiddle.net/6Px4M/3/

function ViewModel() {
    var self = this;
    self.repeatGuest = new RepeatGuest();
    self.removeDate = function (date) {
        self.repeatguest.dates.remove(date);
    }
}

文章来源: Knockout nested view model