Привязка начального / заданного по умолчанию значения раскрывающегося списка

Question

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

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

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

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

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

Answer 1

Полагаю, вам нужно передать только идентификатор, а не весь объект в наблюдаемой функции selectedSourceMaterialType ->

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

Answer 2

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

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

Answer 3

Как подсказывает @nEEBz, selectedSourceMaterialType инициализируется неправильно. В учебнике learn.knockoutjs.com «Списки и коллекции» они инициализируют свойство selected-item своей модели представления, передавая значение определенного индекса наблюдаемого массива. Например, сделать это:

selectedSourceMaterialType: ko.observable(sourceMaterialTypes[2])

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

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

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