1

構築しようとしているUIについては、こちらのjsFiddleリンクを参照してください。まず、ユーザーが会議を選択します。選択した会議のイベントはアコーディオンに表示され、各イベントにはテーブルがあり、アコーディオン内にプレーンなhtmlテーブルとして表示されます。ユーザーは、テーブルをドラッグアンドドロップして、並べ替え順序をカスタマイズできる必要があります。これはすべて、これまでうまく機能してきたKnockout JSに支えられていますが、私はブロックにぶつかりました...

私が最初に抱えた問題は、アコーディオンの「データバインディング」でした。ここにあるカスタムバインディングハンドラーソリューションを実装しましたが、これはうまく機能しているようです。ただし、テーブルレコードの並べ替え可能な機能を確実に接続できないようです。

単純に呼び出すことはできませ$(".sortable tbody").sortable();ん$(document).ready(function(){});。これは最初の会議では機能しますが、SelectedConferenceが変更されるとすぐに、並べ替え可能な機能が失われます。アコーディオンのカスタムバインダーの更新機能に追加できます。

update: function (element, valueAccessor) {

            var options = valueAccessor();
            $(element).accordion("destroy")
            $(element).accordion({ active: "h3:last", collapsible: true });

            //TODO: add sortable call here
        }

それはうまくいくようですが、私はカスタムバインダーに不慣れです。これは非効率的ですか？並べ替え可能な機能を実装するためのより良い方法はありますか？

ありがとう！

4

1 に答える 1

1

カスタム バインディング ハンドラーについて心配する必要はありません。カスタム バインディング ハンドラーは、この種のロジックを配置するのに適した場所です。

ただし、アコーディオンとは関係がないため、並べ替え可能なロジック専用の新しいカスタム バインディングを作成することをお勧めします。

ko.bindingHandlers.sortable = {
    init: function (element, valueAccessor) {
        var options = valueAccessor() || {};
        $(element).sortable(options);
    }
}

次に、それを html で使用できます。

<tbody data-bind="foreach: Tables, sortable: {}">

JSFiddleのデモ。

于 2013-01-01T16:36:38.147 に答える