Question

嗨，我是JSON的新手以及人们所说的有关前端动态更改的JavaScript模板引擎的所有内容，但我无法继续帮助我

json file data.json

    {
    users: [{
        username: "alan",
        firstName: "Alan",
        lastName: "Johnson",
        email: "alan@test.com"
    }, {
        username: "allison",
        firstName: "Allison",
        lastName: "House",
        email: "allison@test.com"
    }, {
        username: "ryan",
        firstName: "Ryan",
        lastName: "Carson",
        email: "ryan@test.com"
    }]
}

在jquery中使用get方法我得到了json文件的响应

 $(function() {
    var raw_template = $('#entry-template').html();
    var template = Handlebars.compile(raw_template);
    var placeHolder = $("#3cols");
    $.get("js/data.json", function(datas, status, xhr) {
        $.each(datas, function(key, val) {
            var html = template(val);
            placeHolder.append(html);
        });
    });
})

我的模板就像

    <script id="entry-template" type="text/x-handlebars-template">          
     {{#each users}}
              <div class="col-md-4">
                <h2>{{username}}</h2>
                <p>{{firstName}}</p>
                <p><a href="">{{email}}</a>
                </p>
              </div>
        {{/each}}
    </script>

我希望数据附加在

中

 <div id="3cols" class="row"></div>

不知道屏幕上显示的内容是什么，但在控制台中我从json获得响应但没有输出

Answer 1

使用该JSON和该模板，我认为模板中的#each已经遍历了您的用户，因此您不需要在Javascript中单独使用.each()。我建议将你的JS更改为：

$(function() {
    var raw_template = $('#entry-template').html();
    var template = Handlebars.compile(raw_template);
    var placeHolder = $("#3cols");
    $.get("js/data.json", function(datas, status, xhr) {
        var html = template(datas);
        placeHolder.append(html);
    });
});

如果仍然无效，那么我们需要确切了解datas是什么。您可以在console.log(datas)之前设置template(datas)，这样我们就可以准确了解您要发送到模板的内容。

不知道如何使用带把手的jquery来获取json数据

1 个答案: