Question

我正在尝试使用JQuery，JSON和Mustache.js创建一个测验应用程序，但我遇到了一些麻烦。

我可以让Mustache.js打印出我的整套JSON对象，没问题，但是我想知道是否有办法让我一次只能打印出一组对象。例如，我希望测验应用程序显示一个问题及其相应的可能答案集（以单选按钮形式），然后当用户选择答案并按下“下一步”按钮时，下一个问题和一组答案将出现并替换以前的答案。

就目前而言，我目前让JQuery对我的json文件进行AJAX调用，并且mustache.js将所有记录拉入并在一系列p标签（用于问题）和ul标签（用于答案）中显示它们。那么现在，有什么方法可以让它一次只抓一个问题吗？

以下是我目前在脚本中的内容。请注意，这是一项正在进行的工作。

$(function(){
    $.getJSON('data.json', function(data){ //Make AJAX call to server
        var template = "{{#quiz}}" + //Create mustashe js template
            "<div class='quizarea'>" +
                "<p>{{question}}</p>" +
                "<ul>" +
                    "{{#answers}}" +
                        "<li>{{text}}</li>" +
                    "{{/answers}}" +
                "</ul>" +
            "</div>" +
        "{{/quiz}}";
        var html = Mustache.to_html(template, data);//Turn template into usable html
        $('#quizpane').html(html);//Send html to the quizpane div
    });//get JSON
});//end function

该示例可在http://jamesdauer.com/javascript/quiz/

找到

也许Mustache.js甚至不是要走的路？我以为我可能会尝试使用把手或灰烬，但我不知道那些会做我想做的更好。我非常感谢大家给予的任何帮助。谢谢！

Answer 1

首先应对代码进行一些更改。 1. javascript：

$(function () {
var template = "<div class='quizarea'>" +
    "<p>{{question}}</p>" +
    "<ul>" +
    "{{#answers}}" +
    "<li>{{text}}</li>" +
    "{{/answers}}" +
    "</ul>" +
    "</div>";
var count = 0;
render = function () {
    var html = Mustache.to_html(template, data.quiz[count]);
    $('#quizpane').html(html);
};
render();
$("#next-question").click(function () {
    count++;
    render();
});
});

2。在HTML中：

    <div id='quizpane'></div>
    <button name="next" id="next-question">Next question</button>

请注意，我更改了模板并在javascript中添加了一个计数器，以便跟踪您当前的问题，而不是将整个data对象发送到render()您发送的当前问题data.quiz[count]

小提琴：http://jsfiddle.net/aBNVJ/1/

使用mustache.js一次迭代一个测验项

1 个答案: