淘汰 SelectedOptions 绑定到“Selected”属性答案

【问题标题】：Knockout SelectedOptions binding to "Selected" property淘汰 SelectedOptions 绑定到“Selected”属性
【发布时间】：2012-06-13 04:08:34
【问题描述】：

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为假，2为真。（它在服务器上是如何表示的——它实际上是状态码）

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

我知道如果我可以将 selectedOptions 绑定绑定到 selected 属性，我将不需要 selectedOpts 对象，我只是没有设置手动订阅 selectedOpts 以查看值列表并手动设置的简单方法已选择的每个项目的 selected 属性。

我相信有一个简单的方法。

谢谢

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

实际上并没有一种方法可以自动执行您想要的操作。

您将拥有的一些选项：

按照您的指示设置对 observableArray 的手动订阅，并循环选项以根据它是否在数组中来设置值
创建您的选项，以便selected 是一个计算出的可观察对象，它会根据它是否在数组中来保持自身更新。缺点是每个选项都会有一个计算，只要 observableArray 更新就会触发（效率低于单个手动订阅）
编写一个自定义绑定，查找selectedOptions 并在绑定中进行订阅。也许您会提供一个函数来执行每个选项，例如：http://jsfiddle.net/rniemeyer/ds2aE/

【讨论】：

感谢 RP。我喜欢您的自定义绑定示例，但我认为它可能过度设计，因为手动订阅/循环似乎非常简单，如下面的 daedalus28 所示。
是的，我会使用手动订阅。只是想让你知道你有几个选择。

【解决方案2】：

手动订阅并不那么可怕，而且非常有用。我已经修改了你的小提琴，以展示如果你只是让选定的属性可观察，这将是多么容易：

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

从设计的角度来看，订阅功能可能应该存在于您的 viewModel 对象中，并且您可能希望使用映射插件来避免手动创建 observable，但您明白了。

【讨论】：

是的，这是我最初考虑的方法，并将采取。我们在解决方案中拥有的真实视图模型是一个“映射”视图模型，我只是简单地举例说明。谢谢 daedalus28 :)
我根据我的具体用途编辑了小提琴 - jsfiddle.net/CsrrD 再次感谢。在我的解决方案中，我还在 ko.applyBindings 之前添加了一个手动循环，以查看 opts 是否有状态 2/1 并在编辑视图的情况下相应地更新 selectedOpts 数组。
这些小提琴似乎不见了。有机会重新上传吗？
因为小提琴没了而被否决，这个答案现在没用了