Knockout SelectedOptions绑定到“Selected”属性

时间:2012-06-13 04:08:35

标签: javascript knockout.js

http://jsfiddle.net/CsrrD/

给定一个对象

var viewModel = {
    Opts: ko.observableArray([
    { d: 'a', v: 0, selected: 1},
    { d: 'b', v: 1, selected: 1},
    { d: 'c', v: 2, selected: 1},
    { d: 'd', v: 3, selected: 2},
    { d: 'e', v: 4, selected: 1},
    { d: 'f', v: 5, selected: 1}
    ]), 
    selectedOpts: ko.observableArray([])
};

我想绑定一个多选列表来更改'selected'属性的值,1为false,2为true。 (它如何在服务器上表示 - 它实际上是状态代码)

<select data-bind="options: Opts,
    optionsText: 'd',
    optionsValue: 'v',
    selectedOptions: selectedOpts,
    optionsCaption: 'Choose...'" multiple=""></select>

我知道如果我可以将selectedOptions绑定绑定到selected属性,我就不需要selectedOpts对象了,我只是没有设置如何执行此操作而不设置对selectedOpts的手动订阅以查看值列表并手动设置已选中的每个项目上的选定属性。

我确信有一种简单的方法。

由于

2 个答案:

答案 0 :(得分:2)

没有办法自动做你想做的事。

您将拥有的一些选项:

  • 设置observableArray的手动订阅,如您所示,并循环选项以根据它是否在数组中设置值
  • 创建您的选项,以便selected是一个计算的observable,根据它是否在数组中保持自身更新。缺点是每个选项都有一个计算,只要更新observableArray就会触发(比单个手动订阅效率低)
  • 编写一个查找selectedOptions的自定义绑定,并在绑定中进行订阅。也许你会提供一个函数来执行每个选项,如:http://jsfiddle.net/rniemeyer/ds2aE/

答案 1 :(得分:0)

手动订阅不是那么可怕,而且非常有用。我已经修改了你的小提琴,以证明如果只是让所选属性可观察,这将是多么容易实现:

http://jsfiddle.net/CsrrD/4/

从设计角度来看,订阅功能可能应该存在于您的viewModel对象中,您可能希望使用映射插件来避免手动可观察的创建,但是您可以理解。