Question

我正在努力学习流星。我下面有两个文件，一个是HTML，另一个是我的main.js.问题是我只想一次显示一个问题。我希望能够按下一个按钮（或者前一个按钮）来进入下一个问题。

我的计划（没有成功）是将问题模板的内部包装在附加到下一个按钮的div中。问题是我不知道如何索引我的MongoDB记录并显示我当前在哪些记录上。任何想法都会有所帮助！

我的MongoDB记录：

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"]}

我的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>

Answer 1

您需要使用反应表来填充结果集合。请仔细阅读此链接，此表处理每页的分页和自定义行。 https://github.com/aslagle/reactive-table

在流星的Paginate与下一个按钮

1 个答案: