使用Dust.js进行客户端模板化的基本示例 [英] Basic Example of Client Side Templating with Dust.js

问题描述

这是我对客户端模板的首次尝试，我想确保自己理解并正确使用了它.阅读 此LinkedIn工程博客 ，我决定使用 dust.js 而不是 胡子 或 此stackoverflow帖子 回答了我的许多问题，但我还有几件事需要澄清.

This is my first foray into client-side templating and I want to make sure I'm understanding it and using it correctly. After reading this LinkedIn engineering blog, I decided to go with dust.js rather than mustache or handlebars. Note that this stackoverflow post answered many of my questions, but I still have a few things I want to clarify.

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

In the environment I work in I have no access to anything on the server side, so everything I create has to be able to run entirely in the client's browser. For this example, I'll try to recreate this code sample from the LinkedIn Dust Tutorial.

我包含 dust-full.js 而不是 dust-core.js ，因为我将即时编译模板:

I include dust-full.js rather than dust-core.js because I'm going to compile the template on the fly:

<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):

And the JavaScript (using 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 中所见

This seems to work fine, as you can see in this jsfiddle.

几个问题:

1. 为什么模板应包含在脚本标签中?为什么不将其包含在具有id ="entry-template"的div中，然后在ust.render()期间替换其中的html，就像在" dust.loadSource(已编译)； "有什么作用?在 文档 中说如果在加载的JS脚本块中包含'compiled'字符串，则将定义并注册'intro'模板.如果您想立即进行操作，则它，但是我不明白那是什么意思.我注意到，如果我删除该行，那么它就行不通了，所以我想理解它.

   What does "dust.loadSource(compiled);" do? In the docs it says "If you include the 'compiled' string as part of a script block of JS that you load, then the 'intro' template will be defined and registered. If you want to do it immediately then" call it, however I do not understand what that means. I have noticed that if I remove that line then it doesn't work, however, so I'd like to understand it.

   我对模板满意并完成后，应该如何编译它，以便导入较轻的 dust-core.js ，而不是由浏览器进行编译在每个页面上加载?这样做有很大的优势吗?还是应该离开 dust-full.js ?

   After I'm satisfied with my template and finalize it, how should I compile it so that I import the lighter dust-core.js rather than have it be compiled by the browser on every page load? Is there a significant advantage to doing this or should I leave as is with dust-full.js?

   更笼统地说，这看起来像是实现尘埃(或与此相关的任何模板框架)的适当/有用的方法吗?或者我只是不在某个地方?

   More generally, does this look like an appropriate / useful way to implement dust (or any templating framework for that matter) or am I just way off somewhere?

   谢谢.

   推荐答案

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

   1. If you put it in a div, the markup will render as soon as the page loads, and with contain the dust {placeholder} syntax. Then, once the client-side rendering happens, it'll suddenly be replaced with the fully rendered content. In a simple example, this can happen so fast you don't notice it. However, depending on how long it takes to download the templates, the dust JS libraries, fetch the JSON (if it's not already embedded in the page), the JS performance of the browser, and other things happening on the page, this switch may be very noticeable to a user, which is not a good experience.

   编译灰尘模板时，输出为包含JavaScript函数的String.看起来像这样:

   When you compile a dust template, the output is String that contains a JavaScript function. It will look something like:

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

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

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

   When you pass this string to dust.loadSource, all it does is eval it, executing this self-calling function. The result is that the dust.register call executes, which associates the body0 function with the name intro in dust.cache. After that, every time you call dust.render("intro"...), dust looks up the intro template in dust.cache and executes the function associated with it.

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

   Store the output of dust.compile in a .js file, such as intro.js for the example above. You can then include dust-core.js and intro.js on the page just like any other JavaScript files (e.g. in script tags or via loaders).

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

   Usually, you store each dust template in a separate file, such as intro.tl and use some sort of build system (e.g. http://gruntjs.com/) to automatically compile it into a .js file every time it changes. You then concatenate all the generated .js files into a single file (grunt can do this too) and load that on the page in a script tag.

   这篇关于使用Dust.js进行客户端模板化的基本示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！