使用Dust.js进行客户端模板化的基本示例

Question

这是我第一次涉足客户端模板,我想确保我理解并正确使用它.阅读这篇LinkedIn工程博客后,我决定选择dust.js而不是小胡子或把手.请注意,这个stackoverflow帖子回答了我的许多问题,但我仍然有一些我想澄清的事情.

在我工作的环境中,我无法访问服务器端的任何内容,因此我创建的所有内容都必须能够完全在客户端的浏览器中运行.对于此示例,我将尝试从LinkedIn Dust Tutorial重新创建此代码示例.

我包括dust-full.js而不是dust-core.js因为我要动态编译模板:

<script src="js/dust-full.js"></script>

这是HTML:

<script id="entry-template">
{title}

<ul>
    {#names}
    <li>{name}</li>{~n}
    {/names}
</ul>
</script>

<div id="output"></div>

和JavaScript(使用jQuery):

$(document).ready(function () {
    var data = {
        "title": "Famous People", 
        "names" : [{ "name": "Larry" },{ "name": "Curly" },{ "name": "Moe" }]
    }

    var source   = $("#entry-template").html();
    var compiled = dust.compile(source, "intro");
    dust.loadSource(compiled);

    dust.render("intro", data, function(err, out) {
        $("#output").html(out);
    });
});

这似乎工作正常,你可以在这个jsfiddle中看到.

几个问题:

1. 为什么模板应包含在脚本标记中？为什么不将它包含在id ="entry-template"的div中,然后在dust.render()中替换html,就像在这个修改过的小提琴中一样？

2. 什么" dust.loadSource(编译); "做什么？它在文档中说"如果你将'编译'字符串作为你加载的JS脚本块的一部分,那么'intro'模板将被定义和注册.如果你想立即执行它,那么"调用它,但我不明白这意味着什么.我注意到,如果我删除该行然后它不起作用,所以我想理解它.

3. 在我对我的模板感到满意并最终确定之后,我应该如何编译它以便导入较轻的dust-core.js而不是在每次加载页面时由浏览器编译？这样做是否有显着优势,或者我应该像dust-full.js一样离开？

4. 更一般地说,这看起来像是一个适当/有用的方法来实现灰尘(或任何模板框架)或我离开某处？

提前致谢.

Answer 1

1. 如果你把它放在一个中div,标记将在页面加载后立即呈现,并包含灰尘{placeholder}语法.然后,一旦客户端呈现发生,它将突然被完全呈现的内容替换.在一个简单的例子中,这可能发生得如此之快,你没有注意到它.但是,根据下载模板所需的时间,尘埃JS库,获取JSON(如果它尚未嵌入页面),浏览器的JS性能以及页面上发生的其他事情,此开关可能对用户来说非常明显,这不是一个好的体验.

2. 编译灰尘模板时,输出是包含JavaScript函数的String.它看起来像:

   (function(){dust.register("intro",body0); function body0(chk,ctx){/*[...]*/}})();

   当你将这个字符串传递给dust.loadSource时,它所做的就是eval它,执行这个自调用函数.其结果是,dust.register呼叫执行,其关联body0的名称功能intro在dust.cache.之后,每次调用时dust.render("intro"...),灰尘都会查找intro模板dust.cache并执行与之关联的功能.

3. 将输出存储dust.compile在.js文件中,intro.js例如上面的示例.然后dust-core.js,您可以intro.js像在任何其他JavaScript文件中一样包含和在页面上(例如,在script tags加载器中或通过加载器).

4. 通常,您将每个灰尘模板存储在一个单独的文件中,例如intro.tl并使用某种构建系统(例如http://gruntjs.com/)在.js每次更改时自动将其编译为文件.然后,您将所有生成的.js文件连接到一个文件中(grunt也可以这样做)并将其加载到script标记页面上.