我正在尝试使用带有dust.js的编译模板在浏览器中呈现HTML(而不是服务器端带有node.js)。如果我在客户端javascript中编译模板,它工作正常。如果我预编译模板并将其作为建议的脚本标记包含在内,则dust.loadSource语句会导致Chrome调试器说:“未捕获的ReferenceError:nowork未定义”,其中“nowork”是模板名称。所以......
此HTML和脚本有效:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>This Works</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="dust-full-0.3.0.min.js"></script>
</head>
<body>
<div id="bingo"></div>
<script type="text/javascript">
var templateKey = 'works';
var myView = {"people":[{"name":"Fred"},{"name":"Harry"},{"name":"Linda"},{"name":"Mary"}]};
dust.loadSource(dust.compile("{#people}<br/>{name}{/people}", templateKey));
dust.render(templateKey, myView, function(err, out) {
$('#bingo').html(out);
});
</script>
</body>
</html>
但这不是:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>This Doesn't Work</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="dust-full-0.3.0.min.js"></script>
<script type='text/javascript' src="nowork.js"></script>
</head>
<body>
<div id="bingo"></div>
<script type="text/javascript">
var templateKey = 'nowork';
var myView = {"people":[{"name":"Fred"},{"name":"Harry"},{"name":"Linda"},{"name":"Mary"}]};
dust.loadSource(templateKey);
dust.render(templateKey, myView, function(err, out) {
$('#bingo').html(out);
});
</script>
</body>
</html>
包含的nowork.js文件包含:
(function() {
dust.register("nowork", body_0);
function body_0(chk, ctx) {
return chk.section(ctx.get("people"), ctx, {
"block": body_1
}, null);
}
function body_1(chk, ctx) {
return chk.write("<br/>").reference(ctx.get("name"), ctx, "h");
}
return body_0;
})();
有人可以帮忙吗?
我刚才意识到,这可能是由于这些文件未在安装了node.js的计算机上提供。我实际上是在我的台式机上本地工作。是吗?
答案 0 :(得分:1)
在提供预编译模板时,实际上不需要调用dust.loadSource
。在内部,dust.loadSource
只对eval
返回的JavaScript字符串执行dust.compile
。如果您移除dust.loadSource
行,则应正确呈现模板。
Node.js对于您在此处尝试的内容不是必需的。事实上,也不需要满尘。如果你正在做的只是在客户端渲染,你可以使用dust-core。