当前我在客户端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>
当然,关键是编译模板总是可以加快交付和渲染速度。但是,由于模板与页面的其余部分一起交付,因此不需要调用loadSource
和compile
。相反,如果你告诉它这样做,灰尘会尝试自己加载一个临时工。
从文档中:
装载
(...
默认情况下,当命名模板无法在缓存中找到时,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文件/模板一起缩小/聚合。
希望这有帮助!!