ドロップダウン（選択）リストの初期値/デフォルト値のバインド

Question

ドロップダウンリストの初期値を設定する際に問題があります。以下のコードは、ビューモデルの定義と初期化を$(document).readyにしたものです。私は配列の選択値を表すsourceMaterialTypesとselectedSourceMaterialTypeという配列を持っています。私は（ASP.Net MVC）モデルと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"); }); 
    }); 
}); 

以下は、ノックアウトバインド定義のドロップダウン（選択）リストの定義です。

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

これは、すべてが（selectedSourceMaterialTypeが正しくバインドされているドロップダウン選択は、その値が正しく更新されて変更した場合ので、それは私が問題を抱えています唯一の最初の選択がある原料のドロップダウンリストで最初に選択した値を除いて正常に動作します）、これは常にビューモデルのsourceMaterialTypes配列の最初の項目です。

最初に選択した値は、（サーバー側）モデルからselectedSourceMaterialTypeビューモデルプロパティの値として初期化される値にしたいと考えています。

Answer 1

は、私はあなたがselectedSourceMaterialType観察可能な機能だけではなく、オブジェクト全体IDを渡す必要があると思います - @nEEBzが示唆したように>は

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

Answer 2

APIにはソリューションがあります。オプションにoptionsCaptionを追加するだけで済みます。

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

Answer 3

、selectedSourceMaterialTypeが正しく初期化されます。 learn.knockoutjs.com "Lists and Collections" tutorialでは、オブザーバブル配列の特定のインデックスの値を渡すことによって、ビューモデルのselected-itemプロパティを初期化します。例えば、これを行う：

selectedSourceMaterialType: ko.observable(sourceMaterialTypes[2]) 

を...これに代えて：

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

その方法は、選択された項目の値がドロップダウンリスト同じ観察アレイ内の項目への参照でありますアイテムはから来る。