如何使用dustjs-linkedin 作为客户端模板? [英] how to use dustjs-linkedin as client side templating?

问题描述

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

为了使用dust.js做客户端模板，你需要三个步骤:

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

对吗?

但是模板从何而来?我看到了两种不同的方法:

 1. <脚本>模板<脚本>2.<div>模板

... 它们都在 DOM 中.哪个是正确的?

我也注意到你可以通过ajax加载模板，所以模板不会在DOM中看到，但我不知道怎么做.

另外，我目前使用 jade 作为快速视图引擎.是否有必要切换到dust.js?有什么优势?

解决方案

这是 LinkedIn Dust JS wiki 页面，可以回答您的问题并提供很好的示例:http://linkedin.github.com/dustjs/

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

是的，您需要编译您的灰尘模板，该模板将成为一个 JavaScript 文件，您可以通过 <script> 标签将其添加到您的页面中，然后调用 dust.render 方法渲染您的模板.下面是一个例子:

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

   嗨{firstName} {lastName}</p>

2. 通过命令行中的 dustc sample.tl 或使用 dust.compile("your_template_code", "template_name") 将 sample.tl 编译为 sample.js编译模板并将输出保存在 JavaScript 文件 (sample.js) 中，或者使用duster.js 通过 nodejs 观看和编译模板:https://github.com/dmix/dusterjs

3. 在你的 html 中添加 sample.js:

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

4. 在您的 JavaScript 中:

   var your_json = {firstName:'James', lastName:'Smith'};灰尘.render('样本'，your_json，函数(错误，输出){your_dom_element.innerHTML = out;});

   上述 dust.render 方法的结果将是

   Hi James Smith

   所以你需要给 dust.render 传递 3 个参数:dust.render(template_name, json, callback)

I get the idea of server and client side templating, but dust.js confuses me a little bit.

In order to use dust.js for client side templating, you need three steps:

1. complie the template
2. load the template
3. render the template

Right?

But where do the templates come from? I saw two different methods:

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

... Both of them are in the DOM. Which is correct?

I also notice that you can load the template via ajax, so the template won't be seen in the DOM, but I don't know how to do that.

Also, I'm currently using jade as express view engine. Is it necessary to switch to dust.js? What is the advantage?

解决方案

This is LinkedIn Dust JS wiki page that can answer your questions and has very good examples: http://linkedin.github.com/dustjs/

But to answer your questions here:

Yes you need to compile your dust template which becomes a JavaScript file that you can add to your page by <script> tag and then call dust.render method to render your template. Here is an example:

1. write following code in a template file and save it as sample.tl

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

2. compile sample.tl to sample.js by dustc sample.tl in command line or use dust.compile("your_template_code", "template_name") to compile the template and save the output in a JavaScript file (sample.js) or you use duster.js to watch and compile templates by nodejs: https://github.com/dmix/dusterjs

3. add sample.js in your html:

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

   this will also register your template to dust.cache.

4. in your JavaScript:

   var your_json = {firstName:'James', lastName:'Smith'};
   
   dust.render('sample', your_json, function(err, out){
   
       your_dom_element.innerHTML = out;
   
   });
   

   The result of above dust.render method will be <p>Hi James Smith</p>

   So you need to pass 3 arguments to dust.render: dust.render(template_name, json, callback)

这篇关于如何使用dustjs-linkedin 作为客户端模板?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！