绑定初始/默认值的下拉列表(select)。

I'm having a small issue with setting the initial value of a dropdown. The code below is the view model definition and the initialization in $(document).ready. I have an array called sourceMaterialTypes and a selectedSourceMaterialType representing the selected value of that array. I am initializing the view model with values from the (ASP.Net MVC) Model and ViewBag.

我有一个小问题关于设置下拉菜单的初始值。下面的代码是视图模型定义和$(文档).ready中的初始化。我有一个名为sourceMaterialTypes的数组和一个selectedSourceMaterialType，它表示该数组的选定值。我正在用来自(ASP)的值初始化视图模型。Net MVC)模型和ViewBag。

var viewModel = {
    sourceMaterialTypes : 
        ko.observableArray(@Html.Raw(Json.Encode(ViewBag.SourceMaterialTypes))),
    selectedSourceMaterialType :
        ko.observable(@Html.Raw(Json.Encode(Model.SourceMaterialType))),
    ingredientTypes :
        ko.observableArray(@Html.Raw(Json.Encode(ViewBag.IngredientTypes))),
    selectedIngredientType : ko.observable()
};

$(document).ready(function () {

    ko.applyBindings(viewModel);

    viewModel.selectedSourceMaterialType.subscribe(function(newSourceMaterialType) {
        $.getJSON("/IngredientType/FindByMaterialType",
                  { "id": newSourceMaterialType })
            .success(function (data) {
                viewModel.ingredientTypes($.parseJSON(data));
            })
            .error(function () { alert("error"); });
    });
});

The following is the definition of my dropdown (select) list with the Knockout binding definition.

下面是带有Knockout绑定定义的下拉列表(select)的定义。

<select id="SourceMaterialTypeId"
        name="SourceMaterialTypeId"
        data-bind="options: sourceMaterialTypes,
                   optionsText: 'Name',
                   optionsValue : 'Id',
                   value: selectedSourceMaterialType"></select>

This all works fine except for the initially selected value in the source materials dropdown (selectedSourceMaterialType is bound correctly so when the dropdown selection changes its value is correctly updated, it is only the initial selection I am having a problem with), which is always the first item in the sourceMaterialTypes array on my view model.

这都没问题除了最初选定的价值源材料下拉(selectedSourceMaterialType必然正确当下拉选择改变它的值是正确的更新,只有最初的选择我有一个问题),这始终是sourceMaterialTypes数组中的第一项视图模型。

I would like the initially selected value to be that which is initialized from the (server-side) model as the value of selectedSourceMaterialType view model property.

我希望最初选择的值是从(服务器端)模型初始化为selectedSourceMaterialType视图模型属性值的值。

3 个解决方案

#1

I guess you need to pass the Id only and not the whole object in the selectedSourceMaterialType observable function ->

我猜您需要只传递Id，而不是selectedSourceMaterialType可观察函数>中的整个对象

selectedSourceMaterialType: ko.observable(@Model.SourceMaterialType.Id)

#2

The API has the solution for you, you'll just need to add optionsCaption to your select.

API为您提供了解决方案，您只需要在选择中添加选项scaption。

<select id="SourceMaterialTypeId"
    name="SourceMaterialTypeId"
    data-bind="options: sourceMaterialTypes,
               optionsText: 'Name',
               optionsValue : 'Id',
               value: selectedSourceMaterialType,
               optionsCaption: 'Please select...'"></select>

#3

As @nEEBz suggested, selectedSourceMaterialType is initialized improperly. In the learn.knockoutjs.com "Lists and Collections" tutorial, they initialize their viewmodel's selected-item property by passing the value of a specific index of the observable array. For example, do this:

正如@nEEBz所建议的，selectedSourceMaterialType初始化不正确。在learn.knockoutjs.com“list and Collections”教程中，他们通过传递可观察数组的特定索引的值来初始化viewmodel的selected-item属性。例如,这样做:

selectedSourceMaterialType: ko.observable(sourceMaterialTypes[2])

...instead of this:

…而不是:

selectedSourceMaterialType: ko.observable({"Id":1,"Name":"Coffee Bean" /* ... */});

That way, the value of the selected item is a reference to the item in the same observable array that the dropdownlist items come from.

这样，所选项的值就是对与dropdownlist项来自的可观察数组中的项的引用。

#1