如何获取 knockoutjs 可观察数组的下一个元素?
How to get the next element of a knockoutjs observable array?
我需要为可观察数组的数组元素实现 2 个按钮(下一个、上一个)。是否有任何默认函数或任何方式在数组元素之间导航?
例如:
var mainArray = ko.observableArray([{id:1,name:'one'},{id:2,name:'two'}]);
当我单击下一步按钮时,它应该 return 下一个对象(如 ko.utils.arrayFirst() returns 给定对象)
有什么帮助吗?
不,没有 "default" 方法可以做到这一点。
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>
它利用:
- 带有指示当前索引的可观察对象的私有变量;
- 两个函数
prev
和 next
来更改该索引(到目前为止 valid/possible);
- A 计算为 return 该索引处的当前项目。
视图 (html) 仅用于演示目的。
我需要为可观察数组的数组元素实现 2 个按钮(下一个、上一个)。是否有任何默认函数或任何方式在数组元素之间导航?
例如:
var mainArray = ko.observableArray([{id:1,name:'one'},{id:2,name:'two'}]);
当我单击下一步按钮时,它应该 return 下一个对象(如 ko.utils.arrayFirst() returns 给定对象)
有什么帮助吗?
不,没有 "default" 方法可以做到这一点。
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>
它利用:
- 带有指示当前索引的可观察对象的私有变量;
- 两个函数
prev
和next
来更改该索引(到目前为止 valid/possible); - A 计算为 return 该索引处的当前项目。
视图 (html) 仅用于演示目的。