Question

我在下拉列表中遇到一些问题，我需要将初始值传递给viewmodel。只是为了澄清：我正在编写一个编辑表单，因此下拉列表将填充一个已经选择的值。

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

剃刀：

<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> 
  } 
}

我的viewmodel看起来像这样：

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

ko.applyBindings(editOfferViewModel);

虽然这在选择新值时肯定有效，但在设置初始值时我有点卡住了。我很幸运能在stackoverflow.com上获得Ryan Niemeyer的大力帮助，带有复选框并创建自定义绑定处理程序，但我仍然很难说是老实说。

所以，非常感谢任何帮助和/或提示！

Answer 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是在外部文件中构建的，那么您只需在视图中设置observable的值（在加载外部脚本之后）

Answer 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。

将初始下拉列表值设置为viewmodel

2 个答案: