如何使 {{#each}} 在特定条件下停止迭代答案

【问题标题】：How to make {{#each}} stop iterate at a certain condition如何使 {{#each}} 在特定条件下停止迭代
【发布时间】：2013-07-27 21:31:31
【问题描述】：

所以我试图做一个小测验，我希望显示每个带有他选择的问题，当用户单击下一个按钮时，当前问题被删除，下一个带有选择的问题被显示。类似的东西：

问题：什么？选择：1-a,2-b,3-c,4-d

“下一步”按钮。

点击下一步，当前问题被删除（也是选项）出现下一个问题：问题：为什么？选择：1-z,2-x,3-y,4-r

“下一步”按钮

这是我的 html 代码：

<div class="well span6 offset3">
            <script id="try" type="text/x-handlebars-template">
                <form>
                    <fieldset>
                        <legend>Login</legend>
                        <input id="fn" type="text" name="userF" class="input-block-level" placeholder="First Name">
                        <input id="ln" type="text" name="userL" class="input-block-level" placeholder="Last Name">
                        <input id="login" type="submit" class="btn btn-primary" value="login">
                    </fieldset>
                </form>
                {{#each this}}
                <div><h4>{{question}}</h4></div>
                <ul>
                {{#each choices}}
                <li><input type="radio" name="{{../question}}" value="{{this}}">{{this}}</li>
                {{/each}}
                </ul>
                {{/each}}
                <input type="submit" id="next" class="btn btn-primary" value="Next" placeholder="Next">
            </script>

这是我的数组：

var allQuestions = [
    new QuestionCreate("Which is the Capital of Australia?", ["Syndey", "Canberra", "Melbourne", "Hobart"], 2),
    new QuestionCreate("How much population there is in Australia?", ["22M", "18m", "20M", "23M"], 4),
    new QuestionCreate("How is the most expensive soccer player ever?", ["Cristiano Ronaldo", "Messi", "Zlatan Ibrahimovic", "Luis Figo"], 1),
    new QuestionCreate("Which national team as the most wins in the Fifa World Cup?", ["Italy", "Spain", "Brazil", "England"], 3)
];

这是我的编译： theTemplateScript = $("#try").html();

var theTemplate = Handlebars.compile(theTemplateScript);

$(".offset3").append(theTemplate(allQuestions));

【问题讨论】：

标签： javascript jquery templates iteration handlebars.js

【解决方案1】：

也许你可以在呈现第一个问题后做这样的事情：

var counter = 0 
$("#next").click(function() {
  $(".offset3").html("")
  counter = counter + 1 
  $(".offset3").append(theTemplate(allQuestions[counter]));
});

【讨论】：

【解决方案2】：

通过事件委托解决了这个问题：

theTemplateScript = $("#try").html();

var theTemplate = Handlebars.compile(theTemplateScript);

var counter = 0

$(".offset3").append(theTemplate(allQuestions[counter]));

$("div").on("click","#next", function() {
    $(".offset3").html("")
    counter = counter + 1
    $(".offset3").append(theTemplate(allQuestions[counter]));
    return counter;
});

【讨论】：