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

Question

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

下面的代码可以工作(请参阅此小提琴),但是没有更清晰,更通用的解决方案(例如使用自定义绑定)？

<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项)数组一样,那么您可以通过此处演示的类似方式实现