我是 Meteor 的新手，我想用集合中的项目创建一个幻灯片，在这种情况下是简单的单词。幻灯片应由后退和前进按钮控制并替换当前单词。
在 JavaScript/jQuery 中，我将创建一个对象数组和一个控制索引，并通过 if 语句进行限制，因此索引永远不会低于零或溢出数组的长度。
有关工作示例，请参见小提琴：
http://jsfiddle.net/j0pqd26w/8/
$(document).ready(function() {
var wordArray = ["hello", "yes", "no", "maybe"];
var arrayIndex = 0;
$('#word').html(wordArray[arrayIndex]);
$("#previous").click(function(){
if (arrayIndex > 0) {
arrayIndex -= 1;
}
$('#word').html(wordArray[arrayIndex]);
});
$("#next").click(function(){
if (arrayIndex < wordArray.length) {
arrayIndex += 1;
}
$('#word').html(wordArray[arrayIndex]);
});
});
流星
我很好奇如何在流星的最佳实践方面实现这一点并遵守反应模式，因为我仍在尝试围绕这个有趣的框架进行思考。我的第一个障碍是翻译
if (arrayIndex < wordArray.length)
// to
if (Session.get("wordIndex") < ( (((length of collection))) )
根据文档，我应该对集合进行查找，但我只能稍后通过 fetch 返回一个空数组。对不起，如果这很长，但任何输入将不胜感激，以帮助我解决这个问题。
collection.find([selector], [options])
cursor.fetch()
这是我到目前为止的代码：
Words = new Mongo.Collection("words");
if (Meteor.isClient) {
// word index starts at 0
Session.setDefault("wordIndex", 0);
Template.body.helpers({
words: function () {
return Words.find({});
},
wordIndex: function () {
return Session.get("wordIndex");
}
});
Template.body.events({
"submit .new-word": function (event) {
// This function is called when the word form is submitted
var text = event.target.text.value;
Words.insert({
text: text,
createdAt: new Date() //current time
});
// Clear form
event.target.text.value = "";
// Prevent default form submit
return false;
},
'click #previous': function () {
// decrement the word index when button is clicked
if (Session.get("wordIndex") > 0) {
Session.set("wordIndex", Session.get("wordIndex") - 1);
}
},
'click #next': function () {
// increment the word index when button is clicked
if (Session.get("wordIndex") < 10 ) {
Session.set("wordIndex", Session.get("wordIndex") + 1);
}
}
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
});
}