Связывание начального/стандартного значения выпадающего списка (выберите)

У меня небольшая проблема с установкой начального значения выпадающего списка. Код ниже - это определение модели представления и инициализация в $(document).ready. У меня есть массив с именем sourceMaterialTypes и selectedSourceMaterialType, представляющий выбранное значение этого массива. Я инициализирую модель представления со значениями из (ASP.Net MVC) Model и 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"); });
    });
});

Ниже приведено определение моего раскрывающегося списка (списка) с определением привязки Knockout.

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

Все это работает отлично, за исключением первоначально выбранного значения в раскрывающемся списке исходных материалов (selectedSourceMaterialType правильно привязано, поэтому, когда выбор раскрывающегося списка изменяет его значение, он правильно обновляется, это только исходный выбор, с которым я столкнулся), который всегда является первым элементом массива sourceMaterialTypes в моей модели представления.

Я хотел бы, чтобы первоначально выбранное значение было таким, которое инициализируется из (серверной) модели в качестве значения свойства модели selectedSourceMaterialType.

Ответ 1

Я думаю, вам нужно передать только Id, а не весь объект в наблюдаемой функции selectedSourceMaterialType →

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

Ответ 2

У API есть решение для вас, вам просто нужно добавить optionsCaption к вашему выбору.

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

Ответ 3

Как предположил @nEEBz, selectedSourceMaterialType инициализируется неправильно. В уроке learn.knockoutjs.com "Списки и коллекции" они инициализируют свой объект selectedmotel viewmodel, передавая значение определенного индекса наблюдаемый массив. Например, сделайте следующее:

selectedSourceMaterialType: ko.observable(sourceMaterialTypes[2])

... вместо этого:

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

Таким образом, значение выбранного элемента является ссылкой на элемент в том же наблюдаемом массиве, из которого появляются элементы списка вниз.