1

免責事項: これは、スタック オーバーフローに関する私の最初の投稿です。十分な情報を提供していない場合はご容赦ください。

質問: ノックアウト JS オブザーバブル配列を使用して設定されたリストビューに動的な量の仕切りを持たせようとしています。仕切りを追加してリストを並べ替えることができますが、「完成した」項目 (これは To Do リストです) を一括削除しても、それらは削除されません。ノックアウト モデルは更新されますが、UI は更新されません。仕切りを使用しないと、すべてがうまく機能します。私が達成しようとしている基本的な機能は、動的な数の仕切りを持つリストがあり、仕切り間でアイテムを移動できることです。アイテムの仕分けとか関係あると思う

私が試したこと: -listview('refresh') の使用とページ作成のトリガー -コンテナーレス コントロール - 単一アイテムの並べ替えと削除にはうまく機能しますが、アイテムの一括削除では UI が更新されません。- リスト ビューを別の方法で処理しようとする特別なバインディング ハンドラー - jquery 自動分割器を使用しますが、これはリストを並べ替えないため、同じ分割器の倍数を取得します。-autodividers と foreach の組み合わせ: items.sort(etc...)

<ol data-role="listview" data-divider-theme="b" id="ToDoListView" data-autodividers="true" data-inset="true" data-bind="foreach: items.sort(function(l,r) {return l.finished() ? 1 : 0})" >

..li 要素がここに存在するなど..

  $("#ToDoListView").listview({
            autodividers: true,
            autodividersSelector: function (li) {
                return $(li).hasClass('finishedItem') ? "Done:" : "To Do:";
            }
        });

数日間、オンラインで多くのソリューションを試しましたが、動的な仕切りを使用して仕切り間でコンテンツを移動することができないようです。分割セクション間で移動した後に並べ替える必要がなかった方が簡単ですが、何かを別の分割に移動すると、その分割内でソートする必要があります。異なるカテゴリごとに個別のリスト/オブザーバブルを作成することは避けたいです。スタック オーバーフローに関しては多くの解決策が提供されており、それらは単純なケースでは機能しますが、私の場合は機能しません。

4

1 に答える 1

2

ノックアウトsubscribeを使用して、変更されるたびに仕切りを更新し、リストビューのobservableArray内容を更新することをお勧めします。

items.subscribe(function (newItems) {
    $("#toDoList").listview({
        autodividers: true,
        autodividersSelector: function (li) {
            return $(li).hasClass('finished') ? "Done:" : "To Do:";
        }
    }).listview("refresh");
});

リストをソートされた状態に維持するには、observableArray何かをプッシュ/削除するときに、すでにソートされている値で更新する必要があります。

var itemsArray = items();
itemsArray.push(newItem);
itemsArray.sort();
items(itemsArray);

これにより、UI を何度も更新する必要がなくなります。

于 2013-06-17T04:22:41.290 に答える