javascript - Django - 从 javascript 附加一个可重用的模板

Question

我目前正在使用以下代码重用模板来填充列表:

<li>
    {% include "ding/search_result.html" with title=field.title url=field.url description=field.description %}
</li>

当有新数据出现时，我希望能够从 javascript 动态地将新元素添加到我的列表中。我可以使用下面的代码添加新的列表项:

$("ul.search-results-list").append('<li>New List Item</li>')

有没有办法让我附加我正在使用的可重用模板代码，并传入适当的参数？

Answer 1

是的，有!而且您还可以重构您的 API。

假设您有一个 API，可以为每个新列表项返回此 json blob。

{
    name: "limelights"
}

让我们为此使用 jQuery(尽管我有点不想这样做。) 所以你像这样查询 API

$.getJSON('api/v1/getName.json', {'someParameter', 123}, function() {
   //this is where you would do your rendering then.
});

那么怎么渲染呢？好吧，我是underscore.js的忠实粉丝它是模板的呈现，所以我要继续使用它(但你可以将它交换为 Mustasche、Handlebars、Hogan 或任何你喜欢的)。

首先，我们将定义一个这样的脚本模板:(我们使用 underscore.js 自己的 ERB 样式模板语言)。

<script type="text/template" id="my_fancy_list">
    <li><%= name %></li>
</script>

现在它几乎可以存在于任何地方，要么在你的模板中，要么在你使用 Require.JS 时需要它，但我们假设它存在于你的模板中(提示:它可以由一些渲染Django 模板标签)

随便吧，

现在用数据填充这个模板:

var template = _.template($('script#my_fancy_list').html());
//this will give you the template as a javascript function.

//Query the API

$.getJSON('api/v1/getName.json', {'startsWith': 'l'}, function(data) {
    $('ul.search-results-list').append(template(data));
});

很快，您现在有了一个 JavaScript 驱动的应用程序，它可以呈现来自服务器的新数据，而无需获取整个模板并再次呈现它。