Knockout SelectedOptions with non-multi select

时间:2014-03-19 14:14:43

标签: arrays knockout.js

美好的一天,

我有一个类似于这个对象的场景:

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

我想将此对象绑定到模板中的select元素,如下所示:

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

我希望这里,即使它是单个项目选择列表,它也会将值推送到选定的数组中。 不幸的是,在非多选列表中看起来selectOptions不会将值默认为数组:

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

请注意,在选择第一个选择列表中的选项之前,第一个显示的值为0.

是否可以直接更改此功能?我宁愿不用其他javascript将第一个值推入数组(在某些情况下,我可能根本不会渲染选择对象,因此必须使用大量逻辑)。 如何创造价值:在数组上推/弹?

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

2 个答案:

答案 0 :(得分:0)

您可以使用subscribe来保持&#34;选择&#34;与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());

答案 1 :(得分: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 });
}

}

然后我在两个模板之间关闭。不幸的是,还有很多额外的工作:(