Knockout嵌套视图模型 [英] Knockout nested view model

问题描述

我坚持一定是一个简单的修复方法。我正在使用带有嵌套视图模型的knockout.js，除了我的删除功能无法正常工作外，一切似乎都很好。它似乎是正确绑定，但是当我单击删除时它不会被触发。

I'm stuck with what must be a simple fix. I am using knockout.js with nested view models, and all seems fine except that my remove function is not working correctly. It appears to be binding correctly, however it is not fired when I click remove.

为什么嵌套视图模型？很长的故事，但基本上很多东西都需要在一个页面上！

Why nested view models? Long story, but essentially a lot of stuff is required to be on one page!

所以这是代码：

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/

那么为什么我的删除功能不会被解雇？

So why isn't my remove function getting fired?

可能的问题：嵌套视图模型是否需要在淘汰赛中采取错误的路径，这似乎没有太多信息？

推荐答案

使用这样的嵌套模型的最佳方法之一是使用 with 绑定。你可以这样做：

One of the best ways to work with a nested model like this is to use the with binding. You can do:

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

现在，范围是你的 repeatGuest 和你可以直接绑定它的属性。

Now, the scope is your repeatGuest and you can bind directly against its properties.

remove 函数的问题与<$的值有关c $ c>此以及 $ parent 当时是谁。执行的函数的值此等于当前范围。绑定remove函数时，作用域是 date 数组中的一个对象。

The issue with your remove function is related to the value of this and who $parent is at that time. Functions are executed with a value of this that is equal to the current scope. When your remove function is bound, the scope is one of the objects in the date array.

典型方式处理这个问题是为了确保你的函数必须始终使用这个的正确值。这可以在绑定（非常难看）中完成，如：

The typically way to handle this is to make sure that your function is bound to always use the correct value of this. This could be done in the binding (very ugly) like:

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

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

A better option is to bind it in the view model, in your RepeatGuest constructor:

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

这允许实现在原型上生存并使用包装器覆盖每个实例，强制执行正确值此。或者，如果你没有把它放在原型上，那么你可以使用 var self = this; 模式并使用 self 在处理程序中。

This allows the implementation to live on the prototype and overwrites it on each instance with a wrapper that forces the correct value of this. Alternatively, if you do not put it on the prototype, then you can use the var self = this; pattern and use self in the handler.

http://jsfiddle.net/cNdJj/

这篇关于Knockout嵌套视图模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！