【问题标题】:how to use dustjs-linkedin as client side templating?如何使用dustjs-linkedin 作为客户端模板?
【发布时间】:2012-12-06 03:26:02
【问题描述】:

我知道服务器端和客户端模板,但dust.js 让我有点困惑。

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

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

对吗?

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

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

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

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

另外,我目前正在使用玉作为快速视图引擎。是否需要切换到dust.js?有什么优势?

【问题讨论】:

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


    【解决方案1】:

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

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

    是的,你需要编译你的灰尘模板,它变成一个 JavaScript 文件,你可以通过&lt;script&gt; 标签添加到你的页面,然后调用 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方法的结果将是&lt;p&gt;Hi James Smith&lt;/p&gt;

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

    【讨论】:

    • 我正在使用linkedin-dust和express,我如何在客户端访问dust.render?我想我必须包含一个 js 文件,但是我必须手动将其添加为静态分离的内容还是灰尘包含该文件的请求处理程序?
    • 是的,您需要将dust-core.js 添加到您的页面以呈现灰尘模板。您还需要添加已编译的灰尘模板文件。 github.com/linkedin/dustjs/blob/master/dist/dust-core.js
    【解决方案2】:

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

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

    【讨论】:

    • 顺便说一句,如果您对性能感兴趣,这是一个糟糕的建议。如果您的模板不改变,最好编译一次,然后将编译后的模板直接提供给客户端,而不是在客户端编译它们。这样你就不需要向客户端发送dust.js,客户端也不需要花时间编译你的模板。
    • 最好在构建时或作为开发的一部分进行预编译,然后在客户端与模型一起编译。这样您就可以允许本地缓存您的模板。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-05-06
    • 1970-01-01
    相关资源
    最近更新 更多