2014-03-19 46 views
0

好日子,与非多淘汰赛SelectedOptions选择

我有一种情况与此类似的对象:

{ 
options: [{},{},{}], //array of objects 
selected: [], //array of selected objects 
multiselect: false, //determine if one or multiple values should be selectable 
} 

我想这个对象的选择元素绑定在一个模板,如如下:

<select data-bind="selectedOptions: selected, options: options, attr: { multiple: multiselect }"></select> 

我希望在这里,即使它是一个单一的项目选择列表,它会将值推入选定的数组。 不幸的是,它会出现一个非多选择列表selectedOptions不会默认值到数组:

这里有一个小提琴显示我的意思: http://jsfiddle.net/LkqTU/15444/

注意,第一个显示的值是0,直到选择第一个选择列表上的选项。

是否可以直接更改此功能?我宁愿不必将第一个值与其他JavaScript一起推送到数组中(有些情况下我可能根本不呈现选择对象,因此必须使用大量逻辑)。 有什么方法来创造价值:推动/弹出一个数组呢?

希望在编写自定义绑定或某种类型之前有一些简单的事情。

+0

我是对的,你想推selectedOption中的每个选定的值? – Akhlesh

回答

0

您可以使用订阅来保持“选定”与svalue同步。 http://jsfiddle.net/LkqTU/15468/

<div> 
    <select data-bind="value: svalue, options: options"></select> 
    <br /> 
    Items in Array: <div data-bind="text: JSON.stringify(selectedOptions())"></div> 
    Selected Value: <div data-bind="text: svalue"></div> 
</div> 

var ViewModel = function() { 
    var self = this; 
    this.options = [1, 2, 3, 4, 5]; 
    this.selectedOptions = ko.observableArray([]); 
    this.svalue = ko.observable(); 
    this.count = ko.computed(function() { 
    return this.selectedOptions().length; 
    }, this); 

    this.svalue.subscribe(function(new_v) { 
    if (new_v) self.selectedOptions([new_v]); 
    }); 
}; 

ko.applyBindings(new ViewModel()); 
+0

谢谢你坦克的时间来写回应:) 做选择多选择或不是问题然而。当列表是非多选时,它相当于获取值,仍然将默认选择存储到selectedOptions列表中。 –

+1

更新了我的答案。 – huocp

0

我结束了使用自定义绑定处理方案

ko.bindingHandlers.selectedValues = { 
//support an array with single value, for making my life easier. 
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
    var arraystore = ko.unwrap(valueAccessor()); 
    if ($.type(arraystore) != 'array') 
     throw ('Custom Binding -- Wrong data type used with this binding'); 
    var val = ko.observable(arraystore[0]); 
    val.subscribe(function (newval) { 
     arraystore.length = 0; 
     arraystore.push(newval); 
    }); 
    ko.applyBindingsToNode(element, { value: val }); 
} 

}

然后我关掉两个模板之间。很多额外的工作不幸的是:(