Nik*_*edt 3 meteor meteor-helper
我是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]);
});
});
Run Code Online (Sandbox Code Playgroud)
流星
我很好奇如何在流星最佳实践方面实现这一点并遵守反应模式,因为我仍在努力围绕这个有趣的框架。我的第一个障碍是翻译
if (arrayIndex < wordArray.length)
// to
if (Session.get("wordIndex") < ( (((length of collection))) )
Run Code Online (Sandbox Code Playgroud)
根据文档,我应该在集合上进行查找,但是稍后只能通过fetch返回一个空数组。抱歉,如果输入时间过长,请多加帮助,以帮助我解决此问题。
collection.find([selector], [options])
cursor.fetch()
Run Code Online (Sandbox Code Playgroud)
这是我到目前为止的代码:
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 () {
});
}
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
2107 次 |
| 最近记录: |