Valeur initiale / par défaut de liaison de la liste déroulante (Sélection)
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 a selectedSourceMaterialType représentant la valeur sélectionnée de ce tableau. J'initialise le modèle de vue avec des valeurs de la (ASP.Net MVC) Modèle et 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 (select) 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 matériaux source (selectedSourceMaterialType est liée correctement, donc lorsque la sélection déroulante change sa valeur est correctement mise à jour, c'est seulement 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) en tant que valeur de la propriété selectedSourceMaterialType view model.
3 réponses
Je suppose que vous devez passer l'Id seulement et pas l'objet entier dans la fonction observable selectedSourceMaterialType- >
selectedSourceMaterialType: ko.observable(@Model.SourceMaterialType.Id)
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>
Comme @ nEEBz l'a suggéré, selectedSourceMaterialType est initialisé incorrectement. Dans le learn.knockoutjs.com tutoriel" listes et Collections " , ils initialisent la propriété selected-item de leur viewmodel en passant la valeur d'un index spécifique du tableau observable. Par exemple, faites ceci:
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 observable tableau que les éléments dropdownlist viennent.