0

ページ上のドロップダウンの選択に基づいて、ノックアウトによって動的に作成される一連のラジオ ボタンを含むページがあります。これはすべて正常に機能していますが、ドロップダウンの変更によりラジオボタンが削除された場合、ラジオボタンの「チェック済み」バインディングがクリアされないように見えるという問題があります。これにより、実際にはビューで何もチェックされていない（または少なくとも何も表示されていない）ときに、「チェック済み」の値を持つViewModelが残ります。

私が期待することは、ラジオボタンが削除されると、チェックされたバインディングがnullに戻ることですが、ラジオボタンがDOMから削除された場合、バインディングが更新されないと想定することしかできません。

jsfiddleでこれが発生していることを確認できます。基本的に、ラジオ ボタンを選択してからドロップダウンを変更すると、選択した値は削除された (したがってチェックされていない) ラジオ ボタンを参照します。

HTML:

<ul data-bind='foreach: availableChildren'>
<li>
    <label>
        <input type="radio" name="children" data-bind="checked: $root.selectedChild, value: id" /><span data-bind="text: name"></span>

    </label>
</li>

ビューモデル:

var ViewModel = function (settings) {

var availableParents = ko.observableArray(settings.parents),
    selectedParent = ko.observable(),

    availableChildren = ko.computed(function () {
        if (!selectedParent()) {
            return null;
        }
        return selectedParent().children;
    }),
    selectedChild = ko.observable();

return {
    availableParents: availableParents,
    selectedParent: selectedParent,
    availableChildren: availableChildren,
    selectedChild: selectedChild,
};
};

これを期待どおりに機能させる方法はありますか、それとも Knockout で見逃されたものですか?

4

1 に答える 1

1

このスニペットをビューモデルに追加して、必要な動作を取得しました。

// create internal computed
ko.computed(function() {
    // add dependency to selectedParent
    var s = selectedParent();
    // reset selectedChild
    selectedChild('');
});

更新されたフィドル: http://jsfiddle.net/danne567/avbU7/2/

于 2013-09-11T10:51:51.480 に答える