如何在客户端使用dustjs-linkedin作为模板引擎？

Question

我理解服务器端和客户端模板的概念，但dust.js让我有些困惑。

为了在客户端使用dust.js进行模板处理，需要三个步骤：

1. 编译模板
2. 加载模板
3. 渲染模板

对吗？

但是模板从哪里来呢？我看到了两种不同的方法：

 1. <script> template <script>
 2. <div> template </div>

两者都在DOM中，哪一个是正确的？

我还注意到你可以通过ajax加载模板，这样模板就不会出现在DOM中，但我不知道如何实现。

另外，我目前正在使用jade作为express视图引擎。是否有必要切换到dust.js？有什么优势吗？

- paynestrike

Answer 1

这是LinkedIn Dust JS的维基页面，可以回答您的问题，并且有非常好的示例：http://linkedin.github.com/dustjs/

但是在这里回答您的问题：

是的，您需要编译您的dust模板，这将生成一个JavaScript文件，您可以通过<script>标签添加到您的页面中，然后调用dust.render方法来呈现您的模板。以下是一个示例：

1. 在模板文件中编写下面的代码，并将其保存为sample.tl：

   <p>Hi {firstName} {lastName}</p>
   

2. 使用命令行运行dustc sample.tl将sample.tl编译为sample.js，或者使用dust.compile("your_template_code", "template_name")编译模板并将输出保存到JavaScript文件（例如：sample.js），也可以使用duster.js在nodejs中监听和编译模板：https://github.com/dmix/dusterjs

3. 在html中添加sample.js：

<script type="text/javascript" src="sample.js"></script>

这也将您的模板注册到dust.cache中。

4. 在您的JavaScript代码中：

var your_json = {firstName:'James', lastName:'Smith'};

dust.render('sample', your_json, function(err, out){

    your_dom_element.innerHTML = out;

});

以上dust.render方法的结果将是<p>Hi James Smith</p>

因此，您需要向dust.render传递3个参数：dust.render(template_name, json, callback)

- Omid Monshizadeh

---

我正在使用linkedin-dust和express，如何在客户端访问dust.render？我猜我必须包含一个js文件，但是我必须手动将其添加为静态服务内容还是dust包括文件的请求处理程序？ - James

是的，您需要将dust-core.js添加到您的页面中以渲染dust模板。您还需要添加已编译的dust模板文件。https://github.com/linkedin/dustjs/blob/master/dist/dust-core.js - Omid Monshizadeh

Answer 2

根据维基百科所述，您可以在客户端或服务器端使用dust。如果您在客户端使用它，您应该获取模板（例如通过ajax请求），编译并在浏览器中呈现。您将需要在页面中包含dust脚本文件。

另一方面，您可以在服务器上使用dust（使用rhino或nodejs）。在这种情况下，您将在服务器上编译和呈现模板，因此浏览器将接收到HTML。

- JAiro

---

顺便说一下，如果你关心性能，这是一个糟糕的建议。更好的方法是，如果你的模板不会改变，那么编译它们一次，然后直接将编译后的模板提供给客户端，而不是在客户端编译它们。这样你就不需要将dust.js发送到客户端，客户端也不需要花时间编译你的模板。 - fabspro

最好在构建或开发的一部分中进行预编译，然后在客户端上使用模板进行编译。这样可以允许本地缓存您的模板。 - pilau