Valor inicial/predeterminado vinculante de la lista desplegable (selección)

Question

Tengo un pequeño problema al establecer el valor inicial de un menú desplegable. El código siguiente es la definición del modelo de vista y la inicialización en $(document).ready. Tengo una matriz llamada sourceMaterialTypes y una selectedSourceMaterialType que representa el valor seleccionado de esa matriz. Estoy inicializando el modelo de vista con valores del Modelo (ASP.Net MVC) y 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"); }); 
    }); 
}); 

La siguiente es la definición de mi lista desplegable (select) con la definición de enlace Knockout.

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

Este

todo funciona bien, excepto por el valor inicialmente seleccionada en el menú desplegable de materiales básicos (selectedSourceMaterialType está enlazado correctamente por lo que cuando la selección desplegable cambia su valor se actualiza correctamente, es sólo la selección inicial que estoy teniendo un problema with), que siempre es el primer elemento en la matriz sourceMaterialTypes en mi modelo de vista.

Me gustaría que el valor inicialmente seleccionado sea el que se inicializa desde el modelo (del lado del servidor) como el valor de selectedSourceMaterialType ver la propiedad del modelo.

Answer 1

supongo que necesita para aprobar la identificación solamente y no el objeto entero en la función observable selectedSourceMaterialType ->

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

Answer 2

La API tiene la solución para usted, solo tendrá que agregar optionsCaption a su selección.

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

Answer 3

Como sugirió @nEEBz, selectedSourceMaterialType se inicializa incorrectamente. En el learn.knockoutjs.com "Lists and Collections" tutorial, inicializan la propiedad del elemento seleccionado de su vista al pasar el valor de un índice específico de la matriz observable. Por ejemplo, hacer esto:

selectedSourceMaterialType: ko.observable(sourceMaterialTypes[2]) 

... en lugar de esto:

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

De esta manera, el valor del elemento seleccionado es una referencia al elemento de la misma matriz observable que la lista desplegable los artículos vienen de.