如果observableArray数组没有与Knockout JS匹配的索引，如何禁用

How to disable if observableArray array has no matching index with Knockout JS

本文关键字：索引 何禁用 JS 数组 observableArray Knockout 如果      更新时间：2023-09-26

我有一个简单的模型对象，它有一个数组属性。

示例：

{name: 'Foo', tags = ['fun', 'cool', 'geek']};

我将这些模型中的更多一个添加到视图模型中的obervableArray中。

//pseudo code
oa.add({name: 'Foo', tags: ['fun', 'cool', 'geek']});
oa.add({name: 'Bar', tags: ['sad', 'dorky', 'uncool']});
oa.add({name: 'Qwerty', tags: ['keys', '101', 'geek']});

现在，当我根据标记筛选项目时，我希望显示一条消息，表明不再有带有特定标记的项目。

过滤器代码：

// self = this;
self.filter = ko.observable('');
self.filterItems = ko.dependentObservable (function() {
    var filter = this.filter();
    if (!filter) {
        return this.items();
    } else {
        return ko.utils.arrayFilter(this.items(), function(item) {
                try {
                    if (compareAssociativeArrays(item.tags, filter)) {
                        return true;
                    }
                } catch (e) {}
                self.items.remove(item);
        });
    }
}, this);

是否可以将给定长度的项目与标记值的indexOf进行数据绑定？

更新

我确实想出了一个解决方案，但不确定是否最好。有了它，我也可以修改和检索总数：

self.hasGeek = ko.computed(function () {
    var sum = 0;
    var item;
    for (var i=0; i<self.items().length; i++) {
        var item = self.items()[i];
        if (item.tags().indexOf('geek') != -1) {
            sum++;
        }
    }
    return (sum > 0) ? true : false;
});

我不确定你的确切结构，但我会设置一个计算的可观察对象来表示你过滤的项目。然后，可以包含一个部分，该部分的可见性由计算出的可观察的过滤项目的长度控制。

希望：http://jsfiddle.net/rniemeyer/aVtpc/

Tag Filter: <input data-bind="value: tagFilter" />
<hr/>
<div data-bind="visible: !filteredItems().length">
    No items found
</div>
<ul data-bind="foreach: filteredItems">
    <li data-bind="text: name"></li>
</ul>​

js:

var ViewModel = function() {
    this.tagFilter = ko.observable();
    this.items = ko.observableArray([
        {name: 'Foo', tags: ['fun', 'cool', 'geek']},
        {name: 'Bar', tags: ['sad', 'dorky', 'uncool']},
        {name: 'Qwerty', tags: ['keys', '101']}
    ]);
    this.filteredItems = ko.computed(function() {
        var filter = this.tagFilter();
        if (!filter) {
           return this.items();   
        }
        return ko.utils.arrayFilter(this.items(), function(item) {       
            return ko.utils.arrayFirst(item.tags, function(tag) {
                  return tag === filter;         
            });                
        });
    }, this);
};
ko.applyBindings(new ViewModel());

快速将psuedo代码从我的脑海中抹去。。。在你过滤掉oa之后，也许可以使用计算函数，你可以做这样的事情：

<span data-bind="text: filterOa().length"></span>
<!-- ko: foreach filterOa -->
   <span data-bind="text: name"></span>
<!-- /ko -->
<!-- if: filterOa().length === 0 -->
    You got nothing
<!-- /ko -->
相关文章：