linkedin – 客户端模板与Dust.js的基本示例

这是我第一次进入客户端模板,我想确保我理解它并正确使用它.在阅读this LinkedIn engineering blog后,我决定与dust.js而不是mustachehandlebars.请注意,this stackoverflow post回答了我的许多问题,但我还有一些事情要澄清.

在我工作的环境中,我无法访问服务器端的任何东西,所以我创建的所有内容必须能够完全在客户端的浏览器中运行.对于这个例子,我将尝试从LinkedIn Dust Tutorial重新创建this code sample.

我包括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);
    });
});

这似乎可以正常工作,可以在this jsfiddle看到.

几个问题:

>为什么脚本标签中应该包含模板?为什么不把它包含在id =“entry-template”的div中,然后替换在dust.render()里面的html,就像在this modified fiddle
>什么是“dust.loadSource(编译)”做?在the docs它说“如果你把’compile’字符串作为你加载的JS脚本块的一部分,那么’intro’模板将被定义和注册,如果你想立即执行,那么”我不明白这是什么意思.我注意到,如果我删除该行,那么它不起作用,但是,我想了解它.
>在我对我的模板感到满意并完成之后,我应该如何编译它,以便我导入更轻的dust-core.js,而不是在每个页面加载时都由浏览器编译?这样做有显着的优势吗,或者我应该像dust-full.js一样离开?
更一般来说,这样做是否适合实施灰尘(或任何模板框架)或者我只是在某个地方离开?

提前致谢.

>如果将其放在div中,那么加载页面后,标记将会显示,并包含灰尘{placeholder}语法.然后,一旦客户端渲染发生,它将突然被完全呈现的内容所替代.在一个简单的例子中,这可能会发生得如此之快,你没有注意到.然而,根据下载模板需要多长时间,垃圾JS库,获取JSON(如果尚未嵌入到页面中),浏览器的JS性能以及页面上发生的其他事情,则此开关可能会对用户来说非常明显,这不是一个很好的体验.
>编译一个灰尘模板时,输出是包含JavaScript函数的String.它会看起来像:

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

当你把这个字符串传递给dust.loadSource时,它所做的就是eval,执行这个自调用函数.结果是执行了dust.register调用,它将body0函数与dust.cache中的名称引用相关联.之后,每当你打电话给dust.render(“intro”…)时,灰尘都会在dust.cache中查找简介模板并执行与之相关的功能.
>将dust.compile的输出存储在.js文件中,例如上面的例子的intro.js.然后,您可以像页面中的dust-core.js和intro.js一样包含任何其他JavaScript文件(例如脚本标签或通过加载程序).
>通常,您将每个灰尘模板存储在一个单独的文件中,例如intro.tl,并使用某种构建系统(例如http://gruntjs.com/),以便在每次更改时自动将其编译为.js文件.然后,将所有生成的.js文件连接成一个文件(也可以这样做),并将其加载到脚本标签的页面上.

http://stackoverflow.com/questions/21356235/basic-example-of-client-side-templating-with-dust-js

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:linkedin – 客户端模板与Dust.js的基本示例