0

私は Durandaljs を使用しており、再利用可能なウィジェットをいくつか作成しています。ウィジェットは素晴らしいです！ただし、1 つのウィジェットに子ウィジェットのアイテム数を取得させる方法を作成しようとしています。

たとえば、ページのセクションを折りたたむことができるアコーディオン ウィジェットと、項目をリストに表示する 2 つ目のウィジェットの 2 つのウィジェットがあります。

別のウィジェットからの子リスト項目の数を取得するには、アコーディオン ウィジェットの見出しが必要です。または、単語数を表示することもできます。基本的には、コンテンツ内から何を数えているかを指定する必要があり、含まれるコンテンツの種類によって異なる場合があります。

要するに、あるウィジェットの知識を他のウィジェット内にハードコーディングせずに、親ウィジェットと子ウィジェットの間で通信する方法が必要なだけだと思います。開発者は、カウントを何にしたいかを明示的に宣言する必要があります。

私が試したものの、うまくいかない、または気に入らないこと：

ko.bindingHandlers.counter = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    alert('init');
    var value = valueAccessor();
    $(element).text(bindingContext.$parent.settings.items.length);
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    alert('update');
    var value = valueAccessor();
    $(element).text(bindingContext.$parent.settings.items.length);
}
};

上記は機能しません。「機能」したとき、最初にしか機能せず、オブザーバブルを監視していなかったため更新が表示されず、次のように変更されたためです

bindingContext.$parent.settings.items().length

子ウィジェットで settings.items().length を使用したにもかかわらず、 bindingContext 内では観察可能ではないため、エラーがスローされました。これは、更新されるバインドされた観察可能であるため機能しました。

また、jQuery を記述して項目をカウントすることもできますが、それは HTML ブロックに固有であり、監視対象のデータ項目ではないことを考えると、正しくないようです。

$(document).on('DOMNodeInserted', '.contentWidget', function () {
    var $t = $(this);
    var count = $('.contentItem', $t).length;
    var $parent = $t.closest('[data-countable]');
    var $countEl = $parent.find($parent.attr('data-countable'));
    if ($countEl) {
        $countEl.text(count);
    }
});

最後に、確かに他の誰かが似たようなことをしていて、私はまだそれを見つけていません。または、デュランダルのドキュメントまたはノックアウトのドキュメントで何かを見逃しているため、これを行う簡単な方法がありません。

4

1 に答える 1

0

別のウィジェットからウィジェットにアクセスしようとする代わりに、ウィジェット間でビュー モデルを共有する方がよいと思います。このようなもの

<div data-bind="accordion:{headerModel:childViewModel}"></div>
<div data-bind="listItems:{itemsModel:childViewModel}"></div>
于 2013-07-13T14:25:15.417 に答える