0

我正在尝试使用 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 甚至不是要走的路？我在想我可能会尝试使用车把或 ember，但我不知道那些会做我想做的更好的事情。我真的很感谢你们可以提供的任何帮助。谢谢！

4

1 回答 1

0

首先应该对您的代码进行一些更改。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/

于 2013-10-16T23:30:14.443 回答