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，{ {3}}或者你想要的任何东西。

首先，我们将定义一个这样的脚本模板:(我们使用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驱动的应用程序，该应用程序可以呈现来自服务器的新数据，而无需获取整个模板并再次呈现。

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

1 个答案: