css - 数据绑定(bind)循环 knockout js，如果我想一次只显示列表中的 2 个名称，然后单击接下来的 2 个名称的按钮

Question

我只想显示数组中存在的前 2 个东西，而不是全部，然后通过单击按钮，接下来的 2 个名称出现直到最后一个，你能帮我更正 knoctout js 的代码吗。

<div class="slide">
    <button type="button" onclick="alert('Hello world!')" style="margin-top: -50px;margin-bottom: 1px;margin-left: 1020px;padding-right:5px;">Read more</button>
        <ul data-bind="foreach:EventBE.WhoElseAttends">
            <li >
                <span data-bind="text:FirstName"></span>
                <span data-bind="text:LastName"></span>,
                <span data-bind="text:Company"></span>
            </li>
        </ul>                  
  <span data-bind="if:EventBE.WhoElseAttends.length <0">No Attendees</span>                    
            </div>

Answer 1

在 JavaScript 中

EventBE.displayCount = ko.observable(2);
EventBE.readMore = function() { EventBE.displayCount(EventBE.displayCount() + 2); };

在 HTML 中

<button type="button" data-bind"click: EventBE.readMore,
  visible: EventBE.displayCount() < EventBE.WhoElseAttends.length">Read More</button>

<ul data-bind="foreach:EventBE.WhoElseAttends.slice(0, EventBE.displayCount())">

这只是一个例子，当 WhoElseAttends 发生变化时，您可能还需要使用订阅者来重置 displayCount。

如果你的WhoElseAttends是observableArray，你需要将EventBE.WhoElseAttends.length修改为EventBE.WhoElseAttends().length