设置viewmodel的初始下拉值

Set initial dropdown value to viewmodel

本文关键字：viewmodel 设置      更新时间：2023-09-26

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

我现在看到的是:

剃刀:

<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);

虽然这在选择新值时确实有效，但在设置初始值时我有点卡住了。我很幸运地从Ryan Niemeyer那里得到了一些很大的帮助，在stackoverflow.com上有复选框和创建自定义绑定处理程序，但我仍然说实话，我很难弄明白。

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

一种常见且简单的方法是将模型值序列化到页面中。就像这样:

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

然后，在select上使用一个标准的数据绑定，比如:

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

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

如果你的viewModel是在一个外部文件中构建的，那么你可以在你的视图中设置observable的值(在你的外部脚本已经加载之后)

我的数据如下:

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属性设置初始值。

相关文章：