Knockout.js：使用带有映射插件的嵌套 observables

Question

我正在构建一个侧边栏来过滤主视图，例如John Lewis 中的那个。我的代码可以运行，但它并不漂亮。

我知道有几个类似的问题，但我不能完全理解我自己的用例。

我需要从服务器（例如通过 JSON）获取复选框的名称，以便在我的 ShopView 上动态创建 observableArrays。

它是这样的：

var data = {
    'gender' : [ ],
    'color' : [ ]
};

var filterMapping = {
    create: function( obj ) {
        return ko.observableArray( obj.data );
    }
}

var ShopView = new function() {

    var self = this;

    ko.mapping.fromJS( { filters: data }, filterMapping, self );

    // this is the bit I don't like
    this.filterChange = ko.computed(function () {
        for( var key in self.filters )  {
            var obj = self.filters[key]; 
             if( ko.isObservable(obj)){
                obj();                 
             }             
        }
    });

    this.filterChange.subscribe( function( ) {
        //make AJAX request for products using filter state
    });

}

我的 HTML 看起来和你期望的一样：

性别

    <ul>
        <li><input type="checkbox" value="male" data-bind="checked: filters.gender" />Male</li>
        <li><input type="checkbox" value="female" data-bind="checked: filters.gender" />Female</li>
    </ul>

正如我所说，它有效，但并不好。在理想的世界中，我可以订阅 this.filters，例如

this.filters.subscribe( function() { 
    //make AJAX request for products using filter state
});

注意我不想在客户端进行过滤 - 只是在动态绑定的复选框更改时更新我的​​视图模型。

有什么想法吗？谢谢！

Answer 1

首先，映射插件应被视为代码重复的辅助工具。我认为将映射插件本身视为解决方案并不是一个好主意。至少不是直接的。它还掩盖了您在 SO 上发布代码时发生的情况，因为我们看不到您正在使用的模型。只是一个想法。

现在，如果您想从服务器获取动态过滤器，并使用它们来过滤项目列表（就像您在商店中一样），我会这样做（这里是 the fiddle）：

var FilterOption = function(name) {
    this.name = name;
    this.value = ko.observable(false);
};

var Filter = function(data) {
    var self = this;
    self.name = data.name;
    options = ko.utils.arrayMap(data.options, function(o) {
        return new FilterOption(o);
    });
    self.options = ko.observableArray(options);
    self.filteredOptions = ko.computed(function() {
        var options = []
        ko.utils.arrayForEach(self.options(), function(o) {
            if (o.value()) options.push(o.name);
        });
        //If no options, false represents no filtering for this type
        return options.length ? options : false;
    });
};

var ViewModel = function(data) {
    var self = this;
    self.items = ko.observableArray(data.items);
    filters = ko.utils.arrayMap(data.filters, function(i) {
        return new Filter(i);
    });
    self.filters = ko.observableArray(filters);
    self.filteredItems = ko.computed(function() {
        //Get the filters that are actually active
        var filters = ko.utils.arrayFilter(self.filters(), function(o) {
            return o.filteredOptions();
        });
        //Remove items that don't pass all active filter
        return ko.utils.arrayFilter(self.items(), function(item) {
            var result = true;
            ko.utils.arrayForEach(filters, function(filter) {
                var val = item[filter.name.toLowerCase()];
                result = filter.filteredOptions().indexOf(val) > -1;
            });
            return result;
        });
    });
};

下一个明显的步骤是添加对具有多个属性或选项属性的项目的支持，但这应该会给您基本的想法。您有一个过滤器列表，每个过滤器都有任意数量的选项（可叠加），并且您使用计算项数组来存储过滤项的结果。

---

编辑：要使用 ajax 订阅获取项目，您可以将 FilteredItems 属性替换为获取选定过滤器的计算属性，然后订阅它，如下所示：

var ViewModel = function(data) {
    var self = this;
    self.items = ko.observableArray(data.items);
    filters = ko.utils.arrayMap(data.filters, function(i) {
        return new Filter(i);
    });
    self.filters = ko.observableArray(filters);
    self.selectedFilters = ko.computed(function() {
        ko.utils.arrayFilter(self.filters(), function(o) {
            return o.filteredOptions();
        });
    });
    self.selectedFilters.subscribe(function() {
        //Ajax request that updates self.items()
    });
};