0

以下は、ドロップダウン リストと、バインディングをチェックするための追加の要素です。

<select data-bind = 
    "options: chains,
    optionsText: function (item) { return item.BusinessModel['Name'] },
    optionsCaption: 'Select...', 
    value: selectedChain">
</select>
<div data-bind = "text: selectedChain().Id"></div>

viewModel と初期化は次のようになります。

function ViewModel() {
    this.chains = null;
    this.selectedChain = ko.observable();
}

$.ajax({
    url: "@Url.Action("Chains", "GetAll")",
    success: function (result) {
        var model = new ViewModel();
        model.chains = result;
        model.selectedChain(result[0]); // Why?
        ko.applyBindings(model);
    }
});

コンボボックスでoptionsCaption(" Select... ") が選択されると、バインディングは機能しなくなります (参照要素の古い値/新しい値のセットはリセットされません)。これが、を初期化する必要がある理由selectedChainです。selectedValue への設定に何か問題があるように思えますnullか?!

誰かが私が間違っていることを教えてもらえますか?

4

1 に答える 1

3

2 番目のバインディングtext: selectedChain().Idには問題があります。「選択...」オプションを選択すると、selectedChainの値が未定義になり、未定義では実行できません.Id。そのためのチェックを追加する必要があります。

<!-- ko if: selectedChain -->
    <div data-bind="text: selectedChain().Id"></div>
<!-- /ko -->

また：

<div data-bind="text: selectedChain() && selectedChain().Id"></div>

例: http://jsfiddle.net/FLD2V/

于 2013-05-01T01:54:29.457 に答える