Make SelectList observable

Question

我想让我的SelectList可观察，以便ViewModel通过对该SelectList所做的更改进行更新。我看到在我的用户界面中的下拉列表中显示的值，但我从来没有看到在ViewModel中更新的选定值，它始终为空。我有更新没有问题的窗体上的其他控件，所以我想知道如何，特别是使SelectList可见。看起来SelectLists和knockout与标准输入控件有点不同。

我有一个类中的以下内容：

public string LocationId { get; set; } 
public IEnumerable<SelectListItem> Locations { get; set; } 

我有填充我的位置排列如下：

private PersonViewModel _viewModel; 

public ActionResult Index() 
{ 
    var locations = new[] 
    { 
     new SelectListItem { Value = "US", Text = "United States" }, 
     new SelectListItem { Value = "CA", Text = "Canada" }, 
     new SelectListItem { Value = "MX", Text = "Mexico" }, 
    }; 

    _viewModel.Locations = locations; 
    return View(_viewModel); 
} 

我有以下的在我的标记：

<script type="text/javascript"> 
    Person.ViewModel = ko.mapping.fromJS(@Html.Raw(Json.Encode(Model))); 
    var locationsArray = ko.observableArray(@Html.Raw(Json.Encode(Model.Locations))); 
</script> 

<form> 
    <table> 
    <tr> 
     <td> 
      Locations: 
     </td> 
     <td> 
      @Html.DropDownListFor(model => model.LocationId, new SelectList(Model.Locations, "Value", "Text"), new { id = "locationsArray" }) 
     </td> 
    </tr> 
    </table> 
</form> 

Answer 1

当您在Index方法中写入时创建一个Get方法，该方法返回值和文本字段结构。像

public ActionResult GetALL() 
    { 

     var data = new[] 
     { 
      new SelectListItem { Value = "US", Text = "United States" }, 
      new SelectListItem { Value = "CA", Text = "Canada" }, 
      new SelectListItem { Value = "MX", Text = "Mexico" }, 
     }; 

     return Json(data, JsonRequestBehavior.AllowGet); 

    } 

和您的ViewModel这样

var DataTable = function(obj) { 
    var self = this; 
    self.Text = obj.Text; 
    self.Value = obj.Value; 
    self.Selected = obj.self; 
}; 
var viewModel = function() { 
     var self = this; 
     self.list = ko.observableArray([]); 
     $.ajax({ 
      url: "@Url.Action("GetALL", "Home")", 
      dataType: 'json', 
      async: false, 
      success: function (data) { 
       self.list.removeAll(); 
       $.each(data,function(index,d) { 
        self.list.push(new DataTable(d)); 
       }); 

      }, 
      error: function (xhr, e, s) { 
      } 
     }); 

    }; 

你选择

<select data-bind="options: list, optionsText: 'Text', optionsValue: 'Value', optionsCaption: 'Select'"></select> 

Answer 2

你可以这样做...

<p>Locations: 
    <select data-bind="options: countries, optionsText: 'shortcountry', optionsValue: 'country', optionsCaption: 'Select'"></select> 
</p> 

而且视图模型...

var countriesVM = { 
      countries: [{ 
       shortcountry: 'US', 
       country: 'United States', 
       disable: ko.observable(false) 
      }, { 
       shortcountry: 'CA', 
       country: 'Canada', 
       disable: ko.observable(true) 
      }, { 
       shortcountry: 'MX', 
       country: 'Mexico', 
       disable: ko.observable(false) 
      }] 
     }; 

     ko.applyBindings(countriesVM); 

看到这里的fiddle。