Question

我想从一个淘汰赛observableArray向页面添加一个选项列表。当要显示的项目数超过可配置数量时，应显示“更多选项...”按钮（或链接）。按此按钮应显示所有项目，并将按钮文本更改为“更少选项”。为了使它更有趣：只有当有多个项目被隐藏时才会显示该按钮。

以下代码有效（请参阅this 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>

Answer 1

您可以编写自定义可观察功能以合并您的所有功能：

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个项目）数组相同，那么您可以通过与演示here

类似的方式实现此目的

如何使用“显示更多...”按钮部分显示observableArray

1 个答案: