web-dev-qa-db-ja.com

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

ドロップダウンの初期値の設定に小さな問題があります。以下のコードは、ビューモデルの定義と$(document).readyの初期化です。 sourceMaterialTypesと呼ばれる配列と、その配列の選択された値を表すselectedSourceMaterialTypeがあります。 （ASP.Net MVC）Mod​​elおよび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ビューモデルプロパティの値として（サーバー側）モデルから初期化される値になります。

javascriptasp.net-mvcknockout.js
34
Simon Fox

selectedSourceMaterialType observable関数のオブジェクト全体ではなく、Idのみを渡す必要があると思います->

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

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

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

@nEEBzが示唆したように、selectedSourceMaterialTypeは不適切に初期化されます。 learn.knockoutjs.com "リストとコレクション"チュートリアル では、観察可能な配列の特定のインデックスの値を渡すことで、ビューモデルのselected-itemプロパティを初期化します。たとえば、次のようにします。

selectedSourceMaterialType: ko.observable(sourceMaterialTypes[2])

...これの代わりに：

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

そのようにして、選択された項目の値は、ドロップダウンリスト項目が由来する同じ監視可能な配列内の項目への参照です。

1
Bryan