Question

我目前正在通过javascriptissexy课程学习Javascript和Handlebar.JS，我目前正在构建动态测验。所有功能都有效，但我无法让handlebar.js部分工作。

我的主要问题是如何仅加载我的Handlebars模板/ Json文件的特定部分，即仅加载当前活动的测验问题和答案。在Javascript中，我选择它如下

    $.getJSON('data'+quiz+'.json', function(data) {

    if (answernumber[quiz] < data.quiz.length) {
        //Create the question and answers for the Quiz the user is in in which the answernumber is the current question and the quiz is the current quiz (User can do several quizzes through the twitter bootstrap taps functionality

        $('.question').text(data.quiz[answernumber[quiz]].question).hide().fadeIn("slow");

        }

所以通过这个javascript，我只得到了从我的JSON文件加载的测验问题，看起来像这样

     {"quiz":[
{
    "question":"Which pop duo was the first western band to play in The Peoples Republic of China??",
    "correctanswer":"a.Wham",
    "answers": [
        { "answer":["a.Wham"]},
        { "answer":["Simon and Garfunkel"]},
        { "answer":["Right Said Fred"]}

    ]
},
{
    "question":"Speed skating originated in which country?",
    "correctanswer":"a.Netherlands",
    "answers": [
        { "answer":["Russia"]},
        { "answer":["a.Netherlands"]},
        { "answer":["Canada"]},
        { "answer":["Norway"]}
    ]
},

]}

我目前在html中通过

加载问题

    <div id="result">test</div>

    <script id="some-template" type="text/x-handlebars-template">
<table>
    <thead>
    <th>Name</th>
    </thead>
    <tbody>
    {{#each quiz}}
    <tr>
        <td>question: {{question}}

    </tr>

    {{/each}}
    </tbody>
</table>

和js中的把手一样

var source = $("#some-template").html();
var template = Handlebars.compile(source);


var data = $.getJSON("test.json", function (data) {


    alert('Load was performed.');
   // alert (data.quiz[0].val());
    var test = ("test2");

    for (var i = 0; i<4; i++) {

        //alert(data.quiz[answernumber[quiz]].answers[i].answer);
    }
    //data = data.quiz;
    $("#result").html(template(data));
});

我意识到代码可能非常模糊，非常感谢帮助。如何从把手模板（当前基于我的js文件中的变量）中选择当前测验问题。不确定我是否应该部分加载我的Json文件或只是部分显示模板以及我如何做。

非常感谢

Answer 1

您错过了模板中的结束标记。

要选择单个JSON对象，在$("#result").html(template(data));调用中，您需要指定JSON文件中您想要的对象。

“数据”是您收到的JSON文件;你可以选择子对象。因此，要访问您将使用的第一个问题：

$("#result").html(template(data.quiz[0]));

第二个问题是$("#result").html(template(data.quiz[1]));等等。如果你想获取一个特定的值（这对于模板的把手无关紧要，但很好知道以备将来参考），你可以使用点符号访问细节：

$("#result").html(template(data.quiz.question)); =＆gt; "Which pop duo was the first western band to play in The Peoples Republic of China??"

要找到具体答案，您可以：

$("#result").html(template(data.quiz[1].answers[2])); =＆gt; "Canada"

我建议您熟悉遍历JSON对象（并且Javascriptissexy.com在此处有关于JSON对象的帖子：http://javascriptissexy.com/javascript-objects-in-detail/）

Handlebar.js如何在JS文件中基于变量加载模板的特定部分

1 个答案: