Question

我有一个页面，该页面当前正在使用模型属性来显示要选择的项目的“列表”，并使用属性“ selectedItems”来选择已经选择的项目。（这是一个多选元素）。

我的问题是，当使用像这样的select元素时：

<select name="SelectedItems" id="SelectedItems" multiple class="form-control chosen-select" data-placeholder="Select Your Items" style="width: 100%">
    @foreach (var item in Model.AvailableItems)
    {
        var itemSelected = Model.SelectedItems.Contains(item) ? " selected " : "";
        <option value="@item.ToString()" @itemSelected>@item.Humanize()</option>
    }
</select>

它会预先选择适当的项目，并且可用项目列表非常完美。但是，当我去保存/发布时，由于剔除绑定中未包含该元素，因此无法识别任何更改。

因此，当我将其包含在剔除绑定中时，如下所示：

<select name="SelectedItems" id="SelectedItems" multiple class="form-control chosen-select" data-bind="selectedOptions: selectedItems" data-placeholder="Select Your Items" style="width: 100%">
    @foreach (var item in Model.AvailableItems)
    {
        var itemSelected = Model.SelectedItems.Contains(item) ? " selected " : "";
        <option value="@item.ToString()" @itemSelected>@item.Humanize()</option>
    }
</select>

它不会加载已选择的项目，但是可以看到尝试保存/发布时所做的更改。

值得注意的是，当我在用于渲染视图模型的敲除代码中放置一个断点（见下文）时，就在执行ko.applyBindings（）之前，您可以在浏览器中看到它确实具有选择的项目已正确预选。然后，一旦ko.applyBindings（）执行，这些预选的项目就会消失。

以下是我的cshtml文件中的脚本部分/标记中的敲除内容：

var viewModelJson = '@Html.Json(Model)';
var viewModelJs = {};
var viewModel = {};
viewModelJs = JSON.parse(viewModelJson);
initializeViewModelJs(viewModelJs);
viewModel = ko.mapping.fromJS(viewModelJs);
ko.applyBindings(viewModel);

我如何才能同时使用这两种功能：1）加载当前选定的项目，以及2）查看对选定项目所做的更改？

Answer 1

页面最初加载和呈现时，由于您已将选项标记为选中，因此它们将显示为选中状态。与视图模型的绑定一旦完成，我怀疑selectedItems数组为空，因此不再选择项目并将其清除。

我的解决方案是在viewmodel中进行所有操作。获取选项列表，使用options绑定以及selectedOptions绑定。因为您在混合服务器和客户端代码，所以会导致这种现象。

请记住，DOM是由视图模型控制的。它通过data-bind:绑定反映了视图模型属性的状态。

也许您可以设置要转换为JSON然后再转换为视图模型的Model对象的状态，以匹配所需的DOM的状态或编写JavaScript视图模型。

Asp.Net MVC 4模型绑定和敲除绑定到选择元素

1 个答案: