web-dev-qa-db-fra.com

Relier la valeur initiale / par défaut de la liste déroulante (sélectionner)

J'ai un petit problème avec la définition de la valeur initiale d'une liste déroulante. Le code ci-dessous est la définition du modèle de vue et l'initialisation dans $(document).ready. J'ai un tableau appelé sourceMaterialTypes et un selectedSourceMaterialType représentant la valeur sélectionnée de ce tableau. J'initialise le modèle de vue avec des valeurs du modèle (ASP.Net MVC) et de 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"); });
    });
});

Ce qui suit est la définition de ma liste déroulante (sélectionnez) avec la définition de liaison Knockout.

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

Tout cela fonctionne bien, sauf pour la valeur initialement sélectionnée dans la liste déroulante des matériaux source (selectedSourceMaterialType est lié correctement, donc lorsque la sélection déroulante change sa valeur est correctement mise à jour, ce n'est que la sélection initiale avec laquelle j'ai un problème) , qui est toujours le premier élément du tableau sourceMaterialTypes sur mon modèle de vue.

Je voudrais que la valeur initialement sélectionnée soit celle qui est initialisée à partir du modèle (côté serveur) comme valeur de la propriété de modèle de vue selectedSourceMaterialType view.

javascriptasp.net-mvcknockout.js
34
Simon Fox

Je suppose que vous devez passer l'ID uniquement et non l'objet entier dans la fonction observable selectedSourceMaterialType ->

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

L'API a la solution pour vous, vous aurez juste besoin d'ajouter optionsCaption à votre sélection.

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

Comme l'a suggéré @nEEBz, selectedSourceMaterialType n'est pas initialisé correctement. Dans le tutoriel "Listes et collections" de learn.knockoutjs.com , ils initialisent la propriété d'élément sélectionné de leur modèle de vue en transmettant la valeur d'un index spécifique du tableau observable. Par exemple, procédez comme suit:

selectedSourceMaterialType: ko.observable(sourceMaterialTypes[2])

...au lieu de cela:

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

De cette façon, la valeur de l'élément sélectionné est une référence à l'élément dans le même tableau observable que les éléments de la liste déroulante.

1
Bryan