如何在没有nodejs的情况下用php代码编写dustjs


How to write dustjs in php code without nodejs

当前我在客户端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 标签输出。我还想知道如何在 php 代码中集成 dustjs。

不要只是把你的模板放在 php 中。正确执行此操作并将模板定义为字符串或单独的 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);
});

在我的模板内.html

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

当然,关键是编译模板总是可以加快交付和渲染速度。但是,由于模板与页面的其余部分一起交付,因此不需要调用loadSourcecompile。相反,如果你告诉它这样做,灰尘会尝试自己加载一个临时工。

从文档中:

装载

(...

默认情况下,当命名模板无法在缓存中找到时,Dust 会返回"找不到模板"错误。覆盖 onLoad 以指定回退加载机制(例如,从文件系统或数据库加载模板)。

内部灰尘将调用loadSource并在必要时compile方法本身。在我上面的例子中,我包含一个可能的灵魂来覆盖dust.onLoad。当然,你也可以简单地返回一个 DOM 节点的 html 内容。

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

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

我还想知道如何在 php 代码中集成 dustjs。

你不能。除非您将模板发送到客户端以在那里渲染,或者您的后端有一个 JavaScript 解释器来渲染模板,否则您不能使用它。

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

这可能有助于您使用 PHP 编译灰尘模板,

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

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

希望这有帮助!!