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。