knockout.js因变量选择

时间:2015-03-16 11:24:03

标签: javascript knockout.js

[请参阅底部的更新]

我正在努力使得淘汰赛依赖选择,它打算通过这些属性进行“产品”选择,例如,如果我选择“尺寸”,则产品可以具有“尺寸”和“材料”,淘汰赛脚本向后端发出请求并检索可用于所选大小的“材料”,换句话说,如果选择了属性,则过滤掉其他属性以仅显示可用值(“所有大小”:1,2,3, 4,5;“铝”:1,4)。

属性列表是完全动态的,大约有80个属性可以以任意方式链接到产品。

这种情况是否有“最佳做法”?

我试图用这样的代码解决它,但还没有成功:

var ViewModel = function(data) {
    var self = this;
    self.data = data;
    self.attributes = ko.observableArray();
    self.data.forEach(function(item, i, a) {
        // I passed .self to catch it later
        // in products as view_model.attributes().
        self.attributes.push(new VariableProduct(item, self));
    })
};

var VariableProduct = function(item, view_model) {
    var self = this;
    self.attribute_name = ko.observable(item.name);
    self.attribute_value = ko.observable('--');

    // list of attribute values
    self.attribute_values = ko.computed(function() {
        var result = {};
        view_model.attributes().forEach(function(attribute, i, a) {
            // here I try to filter each attributes lists by values
            // it doesn't work well
            if (attribute.attribute_name() != self.attribute_name() && self.attribute_value() != '--') {
                result = attribute.attribute_values().filter(
                        function(value) {
                            return value.indexOf(self.attribute_value()) >= 0;
                        });
            }
        });
        return result;
    });
};

更新1: 有了Dnyanesh对ko.subscribe()的引用,我已经获得了这些结果,还不行,但是进步了:

http://jsfiddle.net/xwild/65eq14p3/

更新2: 最后,它使用knockout.reactorknockout.mapping插件解决了。

Related stackoverflow question详细说明和答案。

1 个答案:

答案 0 :(得分:2)

对于依赖选择我认为您可以按以下方式使用订阅

var vm = {
        sizes: ko.observableArray([
            { name: 'size 1', id: 1},
            { name: 'size 2', id: 2},
            { name: 'size 3', id: 3},
            { name: 'size 4', id: 4}
        ]),
        selectedSize : ko.observable(0),
    
    };
        
          vm.selectedSize.subscribe(function(newValue){
              alert('Selected Size is ---> ' + newValue )
           // Here at this point call your ajax or backend method and bind the values which are coming form 
        });
      
    ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<select data-bind="
    options: sizes,
    optionsText: 'name',
    optionsValue: 'id',
    value: selectedSize,
    optionsCaption: 'Choose Size...'"">
</select>
 
<select data-bind="
    options: material,
    optionsText: 'name',
    optionsValue: 'id',
    value: selectedMaterial,
    optionsCaption: 'Choose Material...'"">
</select>

我知道我说的只是解决问题的一部分,但我认为你需要划分数据对象以将其绑定到各种控件。