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

我对Knockout.js相当陌生，因此这可能是一个愚蠢的问题。将现有的选择选项绑定到Knockout视图模型

我在阅读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>

来源

2012-04-20 DreamSonic

没有，没有干净的方法来保护它们。但是分解可用选项并不是一个好主意 - 要么将整个数据放在视图模型中，要么放在视图中，不要混合使用。你为什么需要这个“功能”？也许有更好的/更清洁的方式。 – Niko 2012-04-20 16:54:48

我的主要担忧是性能：动态添加100个项目而不是使用已经渲染的项目似乎不是一个好主意。特别是在像手机这样的低功耗场景中。 – DreamSonic 2012-04-20 18:05:22

当它成为一个问题时，可能会担心性能......此外，选择框中的100个项目也不是完全理想的。 – 2012-10-10 19:24:10

根据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>

来源

2012-04-21 19:33:12 DreamSonic

你使用了什么后端？我建议把所有现有的选项放入json对象并填充视图模型http://knockoutjs.com/documentation/plugins-mapping.html

来源

2012-04-20 17:24:37

后端在这里不是问题，这是纯粹的客户端问题。（我使用ASP.NET MVC3） – DreamSonic 2012-04-20 18:07:35

我想知道你是否使用.net或ruby。使用json.net http://json.codeplex.com/创建一个json对象来填充你的viewmodel。这将以您选择列表所需的方式工作。 – 2012-04-20 19:39:11

我认为杰森的观点是有另一种方式来做到这一点。从服务器提供选项让您不用担心它们是否是静态的，视图是愚蠢的，只是显示了它给出的选项。视图模型也以相同的方式对这些选项执行操作。如果以后这些选项需要更改，那么您的服务器端代码就是需要更改的所有内容。 – 2012-10-10 19:22:08

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

回答

相关问题