Javascript 使用“下一步”按钮在Meteor中分页
我正在努力学习流星。我在下面有两个文件,一个是HTML,另一个是my main.js。问题是,我一次只想显示一个问题。我希望能够按下下一个按钮(或者上一个按钮)进入下一个问题 我的计划(没有实现)是将问题模板的内部包装在一个div中,并附加到next按钮。问题是,我不知道如何索引我的MongoDB记录,并显示我当前使用的MongoDB记录。任何想法都会有帮助 我的MongoDB记录:Javascript 使用“下一步”按钮在Meteor中分页,javascript,jquery,mongodb,meteor,Javascript,Jquery,Mongodb,Meteor,我正在努力学习流星。我在下面有两个文件,一个是HTML,另一个是my main.js。问题是,我一次只想显示一个问题。我希望能够按下下一个按钮(或者上一个按钮)进入下一个问题 我的计划(没有实现)是将问题模板的内部包装在一个div中,并附加到next按钮。问题是,我不知道如何索引我的MongoDB记录,并显示我当前使用的MongoDB记录。任何想法都会有帮助 我的MongoDB记录: 0{_id: "XRvr9os2vtf77kKBB", question: "When was the war
0{_id: "XRvr9os2vtf77kKBB", question: "When was the war of 1812", answer: "1812", choices: ["1811", "1812", "1814", "1816"]}
1{_id: "zkkWkEEPws2M7pmY4", question: "When was the Declaration of Independence Written?", answer: "1776", choices: ["1776", "1779", "1789", "1804"]}
My main.js:
if (Meteor.isClient) {
Template.box.helpers({
'explanation': function() {
return Session.get('explanation')
}
})
Template.questions.helpers({
'helpme': function() {
return questionsList.find()
}
});
Template.questions.events({
'click .options': function(li) {
result = $(li.target).text();
var notquite = "try again!";
result = result.trim()
$(li.currentTarget).css("font-size", "3em").css("background-color", "red").css("opacity", "0.6");
Session.set('explanation', notquite)
var something = questionsList.find({
answer: result
}).fetch()[0].answer;
var patontheback = "Good Job!"
$(li.currentTarget).css("font-size", "3em").css("background-color", "lightgreen");
Session.set('explanation', patontheback);
}
})
}
if (Meteor.isServer) {
};
和我的HTML:
<head>
<title> Coding CS Fundamentals Practice</title>
</head>
<body>
<span style="padding-left: 5%; color: darkgreen; ">
{{> loginButtons}}
</span>
<hr>
<h1>Interview Practice</h1>
<br>
<div class="main-body">
<div style="border: 2px solid gray">
{{> questions}}
</div>
{{> box}}
</div>
</body>
<template name="questions">
{{#each helpme}}
<span class="titlequestion" >
<li class="titlequestion"> {{question}}</li>
</span>
{{#each choices}}
<div class="listout">
<hr> <li class="options" id="#total"> {{this}} </li><hr>
</div>
{{/each}} {{/each}}
<button class="add-question">NEXT</button>
</template>
<template name="box">
<div id="why"> {{explanation}} </div>
</template>
编码CS基础实践
{{>loginButtons}
面试实践
{{>问题}
{{>box}
{{{每个人都帮我}
{{question}
{{{#每个选项}
{{this}
{{/each}{{/each}
下一个
{{解释}
您需要使用反应表来填充结果集合。请浏览此链接,此表处理每页的分页和自定义行。