淘汰赛过滤绑定答案

【问题标题】：Knockout Filtered Binding淘汰赛过滤绑定
【发布时间】：2014-09-15 14:44:03
【问题描述】：

我正在寻找有关如何使以下内容发挥作用的一些指导： http://jsfiddle.net/gdefilippi/qgr1s51s/4/

在上面的小提琴中，我有两个 observableArrays。一个为另一个提供过滤器。这将应用于较大项目中的异步调用。

无论如何，我正在循环播放段，然后循环播放按段过滤的项目。那里一切都很好。

当我将新项目推入项目 observableArray 时，结果不会反弹。我将如何让重新绑定正常且轻松地工作。在下面的代码和 Fiddle 中，希望添加将项目推送到 observableArray 项目（请参阅 add 函数）更新，问题是绑定与过滤功能相反。

样品：

var vm = function(){
    var self = this;
    self.items = ko.observableArray([
        {label:'item1',segment:1},
        {label:'item2',segment:2}
    ]);
    self.segments = ko.observableArray([
        {title:'Segment 1',id:1},
        {title:'Segment 2',id:2}
    ]);
    self.bysegment = function(segment){
        return ko.utils.arrayFilter(self.items(), function (_item){
            return _item.segment === segment;
        });
    };
    self.add = function(id){
        self.items.push({
            label:'new',
            segment:id
        });
        alert(items().length)
    };
};
ko.applyBindings(vm);

<!-- ko foreach: segments -->
<h1 data-bind="text: title + ' : ' + id"></h1>
    <!-- ko foreach: bysegment(id) -->
    <span data-bind="text: label + ' : ' + segment"></span>
    <!-- /ko -->
<button type="button" data-bind="click: add">Add</button>
<!-- /ko -->

谢谢，杰弗里

【问题讨论】：

标签： knockout.js ko.observablearray

【解决方案1】：

您的 by segment 函数不是可淘汰的可观察变量，因此它无法更新 ui。您可以将其设为computed variable，当用于获取计算变量的可观察变量更新时，计算变量也将更新。这就是你的清单。

或者您可以通过将段获取到单独的模型来构建更结构化的模型绑定，例如 ;

我在这里更改了你的fiddle

var segment = function (data) {
    var self = this;

    self.id = ko.observable(data.id);
    self.title = ko.observable(data.title);

    self.items = ko.observableArray(data.items);


    self.newItem = function (data) {
        self.items.push({
            label: 'new',
            segment: data.id()
        });
        alert(self.items().length);
    }
}

在你的主虚拟机中

var vm = function () {
    var self = this;
    var dbItems = [{
        label: 'item1',
        segment: 1
    }, {
        label: 'item2',
        segment: 2
    }];

    var dbSegments = [{
        title: 'Segment 1',
        id: 1
    }, {
        title: 'Segment 2',
        id: 2
    }];

    self.segments = ko.observableArray([]);

    ko.utils.arrayForEach(dbSegments, function (item) {
        self.segments.push(new segment({
            id: item.id,
            title: item.title,
            items: ko.utils.arrayFilter(dbItems, function (_item) {
                return _item.segment === item.id;
            })
        }));
    });

};
ko.applyBindings(vm);

【讨论】：

所以我更新了小提琴，它似乎可以按我的意愿工作。有趣的是，我不必将变量传递给 click 调用，而是允许它在 obj 调用中发送。 jsfiddle.net/gdefilippi/qgr1s51s/9
很高兴您解决了这个问题。并有机会使用对象。当您页面中的组件数量增加时，它会有所帮助。

【解决方案2】：

http://jsfiddle.net/gdefilippi/qgr1s51s/9/

html:

<!-- ko foreach: segments -->
<h1 data-bind="text: title + ' : ' + id"></h1>
    <!-- ko foreach: bysegment(id) -->
    <span data-bind="text: label + ' : ' + segment"></span>
    <!-- /ko -->
<button data-bind="click: add">Add</button>
<!-- /ko -->

JavaScript：

var vm = function(){
    var self = this;
    self.items = ko.observableArray([
        {label:'item1',segment:1},
        {label:'item2',segment:2}
      ]);
    self.segments = ko.observableArray([
        {title:'Segment 1',id:1},
        {title:'Segment 2',id:2}
    ]);

    self.bysegment = function(id){

        return ko.utils.arrayFilter(self.items(), function (_item){
            return _item.segment === id;
        });
    };

    self.add = function(obj){

        self.items.push({
            label:'new',
            segment:obj.id
        });
    };
};
ko.applyBindings(vm);

【讨论】：