ノックアウト 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>