Question

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

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

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

当我将新项目推入observableArray项目时，结果不会反弹。我如何才能让重新绑定正常且轻松地工作。在下面的代码和小提琴中，想要将一个项目推入observableArray项目（参见add function）更新，问题是绑定是针对过滤函数的。

样品：

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 -->

谢谢，杰弗里

Answer 1

你的分段函数不是一个可淘汰的可观察变量，因此无法更新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);
    }
}

并在主vm中

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

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

淘汰过滤绑定

2 个答案: