将初始下拉值设置为 viewmodel答案

【问题标题】：Set initial dropdown value to viewmodel将初始下拉值设置为 viewmodel
【发布时间】：2014-02-25 04:40:54
【问题描述】：

我在下拉列表中遇到了一些问题，我需要将初始值传递给视图模型。澄清一下：我正在处理一个编辑表单，所以下拉列表将填充一个已经选择的值。

到目前为止我所拥有的是：

剃须刀：

<select data-bind="selectedOptions: selectedLength"> 
// razor code omitted 
foreach(var preValue in lengthPreValues) 
{ 
   if(lengthPreValues.Contains(preValue.value)) 
   { 
      <option selected="selected" value='@preValue'>@preValue</ option> 
   } 
  else 
  { 
     <option value='@preValue'>@preValue</option> 
  } 
}

我的视图模型看起来像这样：

var editOfferViewModel = { 
  // Properties omitted 
  selectedLength: ko.observable("") 
}; 

ko.applyBindings(editOfferViewModel);

虽然这在选择新值时肯定有效，但在设置初始值时我有点卡住了。我很幸运在 stackoverflow.com 上获得了 Ryan Niemeyer 的一些帮助，包括复选框和创建自定义绑定处理程序，但我仍然老实说，很难弄清楚。

因此，非常感谢您提供任何帮助和/或提示！

【问题讨论】：

标签： javascript html knockout.js

【解决方案1】：

执行此操作的一种常见且简单的方法是将模型值序列化到页面中。这将是这样的：

var viewModel = {
  choices: ko.observableArray(@Html.Raw(Json.Encode(Options))),
  selectedChoices: ko.observableArray(@Html.Raw(Json.Encode(SelectedOptions)))
};

然后，只需在您的选择上使用标准数据绑定，例如：

data-bind="options: choices, selectedOptions: selectedChoices"

您甚至不需要在 Razor 中填充选项元素。

如果您的viewModel 是在外部文件中构建的，那么您只需在视图中设置可观察对象的值（在加载外部脚本之后）

【讨论】：

【解决方案2】：

我的数据是这样的：

dataList = [ {name:'length1',id:1},{name:'length2',id:2},{name:'length3',id:3},{name:'length4',id:4},{name:'length5',id:5} ]

我一直在使用这样的下拉数据：

<select name="xxx" id="xxxid" data-bind="options: dataList,  value: selectedLength , optionsText: 'name', optionsValue: 'id', optionsCaption: 'Please Select...'"></select>


<select name="xxx2" id="xxxid2" data-bind="options: dataList,  selectedOptions: multiSelectedLength , optionsText: 'name', optionsValue: 'id', optionsCaption: 'Please Select...'" size="5" multiple="true"></select>   

var editOfferViewModel = {
 selectedLength: ko.observable(),
 multiSelectedLength: ko.observableArray()    
};

ko.applyBindings(editOfferViewModel);

$(document).ready(function() {
    // Set initial value
    editOfferViewModel.selectedLength(2);
    // Set inital multi value
    editOfferViewModel.multiSelectedLength(['2','3']);   
});

您可以使用 value 属性来设置初始值。

这是工作的example。

【讨论】：