如何通知父母的变更

Question

我正在使用KnockoutJS,我想知道一种方法,observableArray中的可观察对象可以通知父级更改.这是一个例子:

http://jsfiddle.net/paragnair/CEEZ5/

HTML:

<h1 id="heading"> <text data-bind="text:childrenCount"></text> Fields selected</h1>
<table id="form">
<tbody data-bind="foreach:children">
    <tr>
        <td data-bind="text:name"></td>
        <td><input type="checkbox" data-bind="checked:isSelected"/></td>
    </tr>
</tbody>
</table>

<a href="#" id="btn-add">Add More Fields</a>?

使用Javascript:

var Child = function(name) {
    var self = this;
    self.name = ko.observable(name);
    self.isSelected = ko.observable(false);
},
    Parent = function() {
        var self = this;
        self.children = ko.observableArray([
            new Child('One'),
            new Child('Two'),
            new Child('Three')
            ]);
        self.children.subscribe(function(children) {
            header.childrenCount($.map(children, function(a) {                
                return a.isSelected() ? 1 : null;
            }).length);
        });
    },
    header = {
        childrenCount: ko.observable(0)
    };

var parentModel = new Parent(),
    extra = parentModel.children().length;
ko.applyBindings(parentModel, $('#form')[0]);
ko.applyBindings(header, $('#heading')[0]);

function setHeading(childrenCount) {
    header.childrenCount(childrenCount);
}

$(document).ready(function() {
    $('#btn-add').click(function() {
        extra++;
        parentModel.children.push(new Child('Extra ' + extra));
        return false;
    });
});?

在上面的示例中,我想显示带有所选字段数的标题.我有一个subscribe事件,observableArray但只有在从数组中添加或删除某些内容时触发,因此当用户实际检查字段列表中的复选框时,事件不会被触发.实现此目的的一种方法是在复选框上添加onchange事件以调用父对象childrenCount上的方法,该方法调用一些外部方法来更新header对象.有没有更好的方法呢？

Answer 1

我认为你可以用不同的方式解决这个问题,同时消除不必要的并发症.您无需将模型分离为单独的applyBindings调用.事实上,除非绝对必要,否则不建议这样做,因为它会增加并发症,如果你不小心可能导致双重绑定.

其次,如果您的标题是您的parentModels子项的结果,那么它确实应该是同一模型的一部分,在编写KO模型时可以而且应该应用OOP原则.这是首先选择使用KO 的优势.

这是我如何解决你的问题.

http://jsfiddle.net/madcapnmckay/edJyp/

var Child = function(name) {
    var self = this;
    self.name = ko.observable(name);
    self.isSelected = ko.observable(false);
},
Parent = function() {
    var self = this;
    self.children = ko.observableArray([
        new Child('One'),
        new Child('Two'),
        new Child('Three')
        ]);

    this.childrenCount = ko.computed(function() {
        var count = 0;
        ko.utils.arrayForEach(self.children(), function (child) {
            if (child.isSelected()) {
                count++;
            }
        });
        return count;
    });

    this.addMore = function () {
        self.children.push(new Child("Extra " + (self.children().length + 1)));
    };
};

var ViewModel = function () {
    var self = this;
    this.parentModel = new Parent();  
};

ko.applyBindings(new ViewModel());

请注意,ViewModel类是多余的,但我假设您有比此处显示的更多功能,这些功能将被标记到此.

顺便说一下,为什么你觉得你需要在你的按钮上使用jquery点击处理程序？我经常看到这个错误,并想知道文档中的内容会引导你走这条路吗？这也可以并且应该移动到您的viewModel上,我在示例中已经完成了.

希望这可以帮助.