I am trying to modify my code so that it only displays the first 2 items in an array initially, and then on clicking a button, the next 2 names are displayed until the end. However, the code I have written seems to have a bug. Can you help me correct this Knockout.js code?
Here is the JavaScript code:
function viewModel() {
this.displayCount = ko.observable(2);
this.readMore = function () {
this.displayCount(this.displayCount() + 2);
};
this.WhoElseAttends = ko.observableArray([]);
for (var i = 0; i < WhoElseAttends().length; i++) {
this.WhoElseAttends.push({ data-bind="text:FirstName", data-bind="text:LastName", data-bind="text:Company" });
}
}
ko.applyBindings(new viewModel());
In HTML:
<div class="slide">
<button type="button" data-bind="click: readMore, visible: displayCount() < WhoElseAttends().length">Read More</button>
<ul data-bind="foreach: WhoElseAttends.slice(0, displayCount())">
<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: WhoElseAttends.length <0">No Attendees</span>
</div>