ドロップダウンの初期値の設定に小さな問題があります。以下のコードは、ビューモデルの定義と$(document).ready
の初期化です。 sourceMaterialTypes
と呼ばれる配列と、その配列の選択された値を表すselectedSourceMaterialType
があります。 (ASP.Net MVC)Modelおよび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"); });
});
});
以下は、Knockoutバインディング定義を含むドロップダウン(選択)リストの定義です。
<select id="SourceMaterialTypeId"
name="SourceMaterialTypeId"
data-bind="options: sourceMaterialTypes,
optionsText: 'Name',
optionsValue : 'Id',
value: selectedSourceMaterialType"></select>
ソースマテリアルドロップダウンで最初に選択された値を除き、これはすべて正常に機能します(selectedSourceMaterialType
は正しくバインドされているため、ドロップダウン選択が変更されると値が正しく更新され、問題が発生しているのは初期選択のみです) 、これは常にビューモデルのsourceMaterialTypes
配列の最初の項目です。
最初に選択した値は、selectedSourceMaterialType
ビューモデルプロパティの値として(サーバー側)モデルから初期化される値になります。
selectedSourceMaterialType
observable関数のオブジェクト全体ではなく、Idのみを渡す必要があると思います->
selectedSourceMaterialType: ko.observable(@Model.SourceMaterialType.Id)
APIにはソリューションがあります。selectsにoptionsCaptionを追加するだけです。
<select id="SourceMaterialTypeId"
name="SourceMaterialTypeId"
data-bind="options: sourceMaterialTypes,
optionsText: 'Name',
optionsValue : 'Id',
value: selectedSourceMaterialType,
optionsCaption: 'Please select...'"></select>
@nEEBzが示唆したように、selectedSourceMaterialType
は不適切に初期化されます。 learn.knockoutjs.com "リストとコレクション"チュートリアル では、観察可能な配列の特定のインデックスの値を渡すことで、ビューモデルのselected-itemプロパティを初期化します。たとえば、次のようにします。
selectedSourceMaterialType: ko.observable(sourceMaterialTypes[2])
...これの代わりに:
selectedSourceMaterialType: ko.observable({"Id":1,"Name":"Coffee Bean" /* ... */});
そのようにして、選択された項目の値は、ドロップダウンリスト項目が由来する同じ監視可能な配列内の項目への参照です。