1

目前我在客户端javascript中做了dustjs如下

<!DOCTYPE html>
<html>
<head>
  <script src="lib/dust-full-0.3.0.min.js" type="text/javascript"></script>
  <script src="vendor/jquery-1.7.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  $(document).ready(function(){

  // JSON response from server 
  var json_object = { "profile_skill": "Profile Skill",
      "skills": [
            { "name": "JavaScript"  },
            { "name": "Ruby" },
            { "name": "Java" }
      ]
    }
  // render method

    dustRender = function(){
      // Get the dust html template to dust compile
      var dust_tag = $('#page').html() ; 

      var compiled = dust.compile(dust_tag, "tmp_skill");
      //load templates
      dust.loadSource(compiled);
      //Renders the named template and calls callback on completion. context may be a plain object or an instance of dust.Context.
      dust.render("tmp_skill", json_object, function(err, html_out) {
      //HTML output
         $('#page').html(html_out);
          console.log(html_out);
      });
    }();


  });

</script>

</head>
<body>
<h1>Dust templates in the browser</h1>
<div id="page">

{profile_skill}
  <ul> {#skills} 
      <li> {name} </li> 
      {/skills}
  </ul>
</div>


</body>
</html>

但是在我的页面视图源中，我可以看到上面的代码而不是 html 标记输出。而且我还想知道如何将dustjs集成到php代码中。

4

2 回答 2

2

不要只是将模板放在 php.ini 中。正确执行并将模板定义为字符串或单独的 html 文件。

var templateName = "myTemplate";
var model = { "profile_skill": "Profile Skill",
    "skills": [
        { "name": "JavaScript"  },
        { "name": "Ruby" },
        { "name": "Java" }
    ]
};



dust.onLoad = function(templateName, callback) {
    // this will load a template with [name].html in the folder templates
    // callback is an internal dust.js function
    $.get(["templates/", ".html"].join(templateName), function(data) {
        callback(undefined, data);
    }, "html"); 
};


// dust just takes the template name as first parameter
// if no template of this name is defined it will attempt to load
// and compile it if needed
// override dust's onLoad function to implement your loading

dust.render(templateName, model, function(err, out){
    $('#page').html(out);
});

在我的 template.html 里面

{profile_skill}
<ul> {#skills} 
    <li> {name} </li> 
    {/skills}
</ul>

当然，重点是编译模板总能加快交付和渲染速度。但是，由于您将模板与页面的其余部分一起提供，因此没有必要调用loadSourceand 。compile相反，如果您告诉灰尘这样做，它会尝试自行加载模板。

从文档中：

正在加载

(...)

默认情况下，当在缓存中找不到命名模板时，Dust 会返回“找不到模板”错误。覆盖 onLoad 以指定后备加载机制（例如，从文件系统或数据库加载模板）。

如果必须，内部灰尘会调用loadSourceandcompile方法本身。在上面的示例中，我包含了一个可能的解决方案来覆盖dust.onLoad。当然你也可以简单地返回一个 DOM 节点的 html 内容。

dust.onLoad = function(templateName, callback) {
    callback(undefined, $("skill template").hmtml());
}

并回答您的最后一个问题：

而且我还想知道如何将dustjs集成到php代码中。

你不能。除非您将模板发送到客户端以在那里呈现，或者您的后端有 JavaScript 解释器来呈现模板，否则您无法使用它。

于 2012-08-10T22:23:16.427 回答
0

正如 Torsten Walter 所提到的，如果您在浏览器中编译/渲染，您将无法在页面中看到 html 源代码。如果您在服务器端进行编译和渲染，html 源代码将包含最终的 HTML 代码。为此，您可以使用 Linkedin 博客中提到的 nodejs 或 Rhino 服务器：http: //engineering.linkedin.com/frontend/leaving-jsps-dust-moving-linkedin-dustjs-client-side-templates

这可能会帮助您使用 PHP 编译灰尘模板，

https://github.com/saravmajestic/myphp/tree/master/dustcompiler

此实用程序仅用于在页面渲染之前编译灰尘模板，这将避免在浏览器中编译时间。您可以将编译后的模板作为 JS 文件加载到您的页面中，该文件可以与其他 JS 文件/模板一起缩小/聚合。

希望这可以帮助！！！

于 2012-08-14T01:12:36.360 回答