将现有选择选项绑定到 Knockout 视图模型答案

【问题标题】：Bind existing select options to a Knockout view model将现有选择选项绑定到 Knockout 视图模型
【发布时间】：2012-04-20 16:31:10
【问题描述】：

我对 Knockout.js 还很陌生，所以这可能是一个愚蠢的问题。

我正在阅读 Bindings 文档，尤其是 options binding。它说在应用绑定时：

所有以前的选项都将被删除。

有没有办法保留现有的选项？

<select data-bind="options: availableOptions, optionsText: 'name', value: selectedOption">
    <option value="1">One</option>
    <option value="2" selected>Two</option>
</select>

<script type="text/javascript">
    var option = function(name, value) {
        this.name = name;
        this.value = value;
    };
    var viewModel = {
        availableOptions : ko.observableArray([]),
        selectedOption : ko.observable()
    };
</script>

【问题讨论】：

不，没有干净的方法来保存它们。但无论如何，拆分可用选项并不是一个好主意——要么将整个数据放在视图模型中，要么放在视图中，不要混合使用。为什么需要这个“功能”？也许有更好/更清洁的方法。
我主要关心的是性能：动态添加 100 个项目而不是使用已经渲染的项目似乎不是一个好主意。尤其是在移动等低功耗场景中。
当它成为一个问题时可能会担心性能......此外，选择框中的 100 个项目也不完全理想。

标签： knockout.js

【解决方案1】：

根据 Niko 的建议，我想答案是最好避免将声明性绑定与静态数据混合。如果视图不太可能更改，则将数据放入视图中（select 上的选项元素）。如果是动态的，则将数据放入 KO 视图模型中。

在我的场景中是前者：

<select data-bind="value: selectedOption">
    <option value="1">One</option>
    <option value="2" selected>Two</option>
</select>

<script type="text/javascript">
    var viewModel = {
        selectedOption : ko.observable()
    };
</script>

【讨论】：

【解决方案2】：

您使用的是什么后端？我建议将所有现有选项放入一个 json 对象中，并用 http://knockoutjs.com/documentation/plugins-mapping.html 填充视图模型

【讨论】：

后端在这里不是问题，这是一个纯粹的客户端问题。（我使用 ASP.NET MVC3）
我想知道您使用的是 .net 还是 ruby。使用 json.net json.codeplex.com 创建一个 json 对象来填充您的视图模型。这将按照您的选择列表所需的方式工作。
我认为 Jason 的意思是还有另一种方法可以做到这一点。从服务器上提供选项让您不必担心它们是否是静态的，视图是愚蠢的，只显示其给定的选项。视图模型也以相同的方式作用于这些选项。然后，如果以后需要更改这些选项，则只需更改您的服务器端代码。