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

时间:2015-06-16 12:21:09

标签: javascript jquery arrays knockout.js observable

我需要为可观察数组的数组元素实现2个按钮(next,previous)。是否有任何默认函数或任何方式在数组的元素之间导航?

例如:

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

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

任何帮助?

1 个答案:

答案 0 :(得分:3)

不,没有"默认"这样做的方法。

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());
&#13;
<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>
&#13;
&#13;
&#13;

利用:

  • 具有指示当前索引的observable的私有变量;
  • 两个函数prevnext来更改该索引(for sofar valid / possible);
  • A计算返回该索引处的当前项目。

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