Başlangıç ​​/ varsayılan değeri açılır listesinin bağlanması (seçenek)

Question

Bir açılır menünün başlangıç ​​değerini belirleyerek küçük bir sorun yaşıyorum. Aşağıdaki kod, $(document).ready numaralı görünüm modelinin tanımı ve başlatılmasıdır. Bu dizinin seçili değerini temsil eden sourceMaterialTypes ve selectedSourceMaterialType adında bir dizim var. Görünüm modelini (ASP.Net MVC) Model ve ViewBag değerleriyle başlatıyorum. Aşağıdaki

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"); }); 
    }); 
}); 

benim açılır (seç) Nakavt bağlayıcı tanımıyla listenin tanımıdır.

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

Bu, tüm (selectedSourceMaterialType doğru bağlıdır açılan seçim değeri doğru güncellenir değiştiğinde bu yüzden, ben bir sorun yaşıyorum sadece ilk seçim olan kaynak malzemeleri açılan başlangıçta seçilen değerin dışında çalışıyor ile), her zaman görünüm modelimde sourceMaterialTypes dizisindeki ilk öğedir.

Başlangıçta seçilen değerin, (sunucu tarafı) modelinden selectedSourceMaterialType görünüm modeli özelliğinin değeri olarak başlatılan değer olmasını isterim.

Answer 1

Sana selectedSourceMaterialType gözlemlenebilir fonksiyonunda değil, yalnızca bütün nesne kimliği geçmesi gerekiyor sanırım - @nEEBz önerildiği gibi>

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

Answer 2

API sizin için bir çözüm sunuyor, seçimlerinize optionsCaption eklemeniz gerekecek.

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

Answer 3

, selectedSourceMaterialType yanlış başlatılır. learn.knockoutjs.com "Lists and Collections" tutorial'da, gözlemlenebilir dizinin belirli bir dizininin değerini geçerek, görünüm modellerinin seçili öğe özelliğini başlatırlar. Örneğin, bu yapın:

selectedSourceMaterialType: ko.observable(sourceMaterialTypes[2]) 

... bunun yerine:

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

Bu şekilde, seçilen öğenin değerini dropdownlist aynı gözlemlenebilir dizide öğeye referanstır öğeler gelir.