使 SelectList 可观察

Question

我想让我的 SelectList 可观察，这样 ViewModel 会随着对该 SelectList 所做的更改而更新。我在 UI 的下拉列表中看到了显示的值，但我从未看到在我的 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>

还有 ViewModel...

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。