Question

我想使我的SelectList可观察，以便ViewModel通过对该SelectList所做的更改进行更新。我看到我的UI中的下拉列表中显示的值，但我从未在ViewModel中看到所选值已更新，它始终为null。我在表单上有其他控件，没有问题更新，所以我想知道如何使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方法，该方法返回Value和Text字段结构。像

 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。

使SelectList可观察

2 个答案: