Question

我知道的所有模板引擎都使用<script>标记在页面中包含自定义模板。例如，JsRender：

<script id="theTmpl" type="text/x-jsrender">

    <div>
       <em>Name:</em> {{:name}}
       {{if showNickname && nickname}}
          (Goes by <em>{{:nickname}}</em>)
       {{/if}}
    </div>

</script>

然后我可以动态使用此模板刷新页面元素：

var template = $.templates("#theTmpl");
var htmlOutput = template.render(data);
$("#result").html(htmlOutput);

但是，我不明白客户端Dust.js是如何工作的。如何在我的页面上安装自定义Dust.js模板？如何动态呈现内容并将结果放在页面上？

Answer 1

灰尘模板可以包含在页面上的script标记中，适用于实验和测试。模板看起来像：

<script id="theTmpl" type="text/x-dust">

    <div>
       <em>Name:</em> {name}
       {?showNickname}
          {?nickname}
            (Goes by <em>{nickname}</em>)
         {/nickname}
      {/showNickname}
    </div>

</script>

JavaScript看起来像这样：

// Get the template content
var template = $('#theTmpl').html();
// Compile the template into JavaScript string
var compiledTemplate = dust.compile(template, 'nicknameTemplate');
// Execute the JavaScript string and register the template within Dust
dust.loadSource(compiledTemplate);

var data = {
  name: 'Green',
  nickname: 'Dust guy',
  showNickname: true
};

// Render the template with template name, data, and a callback function
// (because Dust is asynchronous
dust.render('nicknameTemplate', data, function(err, out) {
  // The rendered output is in the out variable. Do with it what you will.
});

虽然这种方法有效，但对于生产站点来说并不理想。要使上述示例生效，您必须在页面上包含dust-full.js，这是一个比dust-core.js大得多的文件（因为dust-full.js包含解析器和编译器，而dust-core.js只需要运行时）。理想情况下，Dust模板在服务器上进行预编译，并作为JavaScript文件提供给客户端。

HTML文件：

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

JavaScript：

var data = {
  name: 'Green',
  nickname: 'Dust guy',
  showNickname: true
};
// The template is already loaded and registered, so all we need to do is render
dust.render('nicknameTemplate', data, function(err, out) {
  // The rendered output is in the out variable. Do with it what you will.
});

如何动态地在客户端上使用Dust.js？

1 个答案: