4

ノックアウト observableArray からページにオプションのリストを追加したいと思います。設定可能な数よりも多くの項目を表示する場合は、[その他のオプション] ボタン (またはリンク) を表示する必要があります。このボタンを押すと、すべての項目が表示され、ボタンのテキストが「Less options」に変更されます。さらに面白くするために、非表示にする項目が複数ある場合にのみボタンを表示する必要があります。

以下のコードは機能します (この fiddleを参照してください) が、よりクリーンで一般的な解決策 (カスタム バインディングを使用するなど) はありませんか?

<ul data-bind="foreach: options">
    <li data-bind="visible: $root.showMore() || $index() < $root.showMoreCount() || $root.options().length <= $root.showMoreCount()+1, text: $data"></li>
</ul>
<a data-bind="visible: options().length-1 > showMoreCount(), text: showMore() ? 'Less options' : 'More options', click: function () { showMore(!showMore()) }"></a>
4

1 に答える 1

7

すべての機能を組み込むために、カスタムの監視可能な関数を作成できます。

ko.showMoreArray = function(initial) {
    var observable = ko.observableArray(initial);

    //observables to change behaviour
    observable.limit = ko.observable(3).extend({numeric:true});
    observable.showAll = ko.observable(false);

    //function to toggle more/less
    observable.toggleShowAll = function() {
        observable.showAll(!observable.showAll());
    };

    //computed observable for filtered results
    observable.display = ko.computed(function() {
        if (observable.showAll()) { return observable(); }
        return observable().slice(0,observable.limit());
    }, observable);

    return observable;
};

これは実際にはすでに書いたものをラップするだけですが、再利用可能で、HTML をよりきれいに残すことができます:

<input data-bind="value: $root.orders.limit, valueUpdate: 'afterkeyup'" /><br/>

<ul data-bind="foreach: orders.display">
    <li data-bind="text: $data"></li>
</ul>

<a data-bind="text: orders.showAll() ? 'Less options' : 'More options', 
    click: orders.toggleShowAll" href="#"></a>

私はjsFiddleに作業バージョンを入れました。

上記の例では、元の配列のプロパティにバインドする必要がありますがdisplay、それ以外の場合は、すべてのコードに対して「完全な」配列として動作します (一般的には、より理にかなっていると思います)。ただし、コードに対してフィルター処理された (つまり、最大 3 項目) 配列として動作することを希望する場合は、ここで示したのと同様の方法でそれを実現できます。

于 2013-06-06T12:43:25.013 に答える