Question

我已经尝试了几天使用jQuery模板来解决一些JSON渲染但没有成功...我希望有人比我更聪明可以发现我出错的地方。

所以我的JSON数据返回类似于此的内容：

[{"pk": 1, "model": "blobs.blob", "fields": {"content": "hello"}}, {"pk": 2, "model": "blobs.blob", "fields": {"content": "goodbye"}}];

然后我尝试使用jQuery模板呈现JSON返回的每个项目：

var blob_template = '<p>${content}</p>';

$.template('blobTemplate', blob_template );

$.getJSON('/myurl/', function(data) {

    $('blobTemplate').empty();

    var blobs = data;

    $.tmpl('blobTemplate', blobs)
        .appendTo('div');
});

模板呈现正常，但没有来自$ {content}的数据。我没有收到任何错误或未定义的消息，但我不知道我哪里出错？非常感谢任何帮助！

更新

好的，为了避免使用弃用的方法或其他脚本/插件，这是一种更好的方法吗？

$.getJSON('/myurl/', function(data) {
    var blobs = [];

    $.each(data, function(i, data) {
        var blob_template = '<p>' + data[i].fields.content + '</p>';

        blobs.push(blob_template);
    });

    $(notes.join('')).appendTo('div');
});

这似乎导致数据[i]未定义:(

Answer 1

根据我对已弃用模板插件的有限了解，它不会选择 content 属性，因为它不是JSON对象集合中每个对象的顶级属性。我认为你的模板应该是这样的：

<p>
    {{each fields}}
        ${$value}
    {{/each}}
</p>

Answer 2

您是否已加入https://raw.github.com/jquery/jquery-tmpl/master/jquery.tmpl.min.js？（因为jQuery.template是测试版）

你在那里做什么$('blobTemplate').empty();？我认为你没有blobTemplate标签

您将${content}替换为data[i].content，但您的内容字段位于data[i].fields.content ...？

使用jQuery模板呈现JSON

2 个答案: