如何获取一个 knockoutjs 可观察数组的下一个元素？答案

【问题标题】：How to get the next element of a knockoutjs observable array?如何获取一个 knockoutjs 可观察数组的下一个元素？
【发布时间】：2015-09-01 06:20:03
【问题描述】：

我需要为可观察数组的数组元素实现 2 个按钮（下一个，上一个）。是否有任何默认函数或任何方式在数组元素之间导航？

例如：

var mainArray = ko.observableArray([{id:1,name:'one'},{id:2,name:'two'}]);

当我单击下一个按钮时，它应该返回下一个对象（如 ko.utils.arrayFirst() 返回给定对象）

有什么帮助吗？

【问题讨论】：

拥有一个包含数组索引的可观察对象。 Next 增加它，prev 减少它。您可以环绕或仅在阵列末端保持稳定。如果你正在做一个像 ko.utils.arrayFirst 这样的匹配，并且你希望 next 和 prev 找到匹配项，那么它会变得更加棘手。

标签： javascript jquery arrays knockout.js observable

【解决方案1】：

不，没有“默认”方法可以做到这一点。

RoyJ 的评论是关于如何自己做。让我把它变成一个工作示例：

var ViewModel = function() {
  var self = this;
  
  self.mainArray = ko.observableArray([{id:1,name:'one'},{id:2,name:'two'}]);
  
  var _currentItemIndex = ko.observable(0);
  
  function navigate(nrOfSpots) {
    if (_currentItemIndex() + nrOfSpots >= self.mainArray().length) { return; }
    if (_currentItemIndex() + nrOfSpots < 0) { return; }
    _currentItemIndex(_currentItemIndex() + nrOfSpots);
  }
  
  self.next = function() { navigate(1); };
  self.prev = function() { navigate(-1); };
  
  self.currentItem = ko.computed(function() {
    return self.mainArray()[_currentItemIndex()];
  });
};

ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

Current Item: 
<i data-bind="text: currentItem().name"></i>
<br />
<button data-bind="click: prev">Previous</button>
<button data-bind="click: next">Next</button>

它利用：

带有指示当前索引的 observable 的私有变量；
两个函数 prev 和 next 更改该索引（目前有效/可能）；
计算后返回该索引处的当前项。

视图 (html) 仅用于演示目的。

【讨论】：