Pregunta Valor inicial / predeterminado vinculante de la lista desplegable (seleccionar)


Tengo un pequeño problema al establecer el valor inicial de un menú desplegable. El código a continuación es la definición del modelo de vista y la inicialización en $(document).ready. Tengo una matriz llamada sourceMaterialTypes y un selectedSourceMaterialType representando 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 (selección) con la definición de enlace Knockout.

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

Todo esto funciona bien, excepto por el valor inicialmente seleccionado en el menú desplegable de materiales de origen (selectedSourceMaterialType está encuadernado correctamente, por lo que cuando la selección desplegable cambia su valor se actualiza correctamente, es solo la selección inicial con la que estoy teniendo un problema), que siempre es el primer elemento en el sourceMaterialTypes matriz en mi modelo de vista.

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


32
2017-07-11 10:50


origen


Respuestas:


Supongo que solo debe pasar el Id y no todo el objeto en el selectedSourceMaterialType función observable ->

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

12
2017-07-12 10:01



La API tiene la solución para ti, solo necesitarás agregar optionsCaption a tu selección.

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

4
2017-07-11 17:05



Como @nEEBz sugirió, selectedSourceMaterialType se inicializa incorrectamente En el tutorial de learn.knockoutjs.com "Listas y colecciones", inicializan la propiedad del elemento seleccionado del modelo de vista pasando el valor de un índice específico de la matriz observable. Por ejemplo, haz esto:

selectedSourceMaterialType: ko.observable(sourceMaterialTypes[2])

...en lugar de esto:

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

De esta forma, el valor del elemento seleccionado es una referencia al artículo en la misma matriz observable de la que provienen los elementos de la lista desplegable.


1
2017-08-29 20:32