如何使用dustjs-linkedin作为客户端模板?

时间:2012-12-06 03:26:02

标签: node.js dust.js client-side-templating

我理解服务器和客户端模板,但是dust.js让我感到困惑。

为了将dust.js用于客户端模板,您需要三个步骤:

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

    但模板来自哪里?我看到了两种不同的方法:

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

    ......他们都在DOM中。哪个是对的?

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

    另外,我目前正在使用jade作为快速查看引擎。是否有必要切换到dust.js?有什么好处?

2 个答案:

答案 0 :(得分:12)

这是LinkedIn Dust JS维基页面,可以回答您的问题,并有很好的例子:http://linkedin.github.com/dustjs/

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

是的,您需要编译您的灰尘模板,该模板将成为您可以通过<script>标记添加到页面的JavaScript文件,然后调用 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中的
  5. 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>

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

答案 1 :(得分:0)

正如wiki所说,你可以在客户端或服务器中使用灰尘。如果在客户端中使用它,则应该获取模板(例如,使用ajax请求),在浏览器中将其编译为渲染。您必须在页面中包含dust脚本文件。

另一方面,您可以使用服务器中的灰尘(使用rhino或nodejs)。在这种情况下,您将在服务器中编译和呈现模板,以便浏览器接收html。