【发布时间】:2012-12-22 16:42:06
【问题描述】:
我使用 mustache.js 作为我的客户端模板解决方案,但我遇到了一个我不知道为什么会发生这种情况的问题:
首先,这是我的模板:
<ul>
{{#steps}}
<li>
<a href="{{url}}">
<div class="step_visual {{step_status}}">
<span class="step_description">{{description}}</span>
</div>
</a>
</li>
{{/steps}}
</ul>
这是我试图传入的 json 对象:
var view = {
"steps": [
{
"url": "complete_profile",
"step_status": "done",
"description": "Complete Proflie"
},
{
"url": "complete_form1",
"step_status": "active",
"description": "Submission of Form 1"
}
]
}
我尝试运行此脚本以在我的应用中呈现它
var content = Mustache.render(template, view);
$(target).html(content).hide().fadeIn();
其中template = 上面的模板 |
view = 视图对象
而target 是我希望更改内容的html元素
让我感到困惑的是,当我的模板看起来像这样时它运行良好
{{#steps}}
{{url}}
{{description}}
{{step_status}}
{{/steps}}
或者如果我的模板没有任何可循环的内容。
可能是什么错误?你认为这是胡须虫吗?
编辑 正如我所看到的代码有效,
会不会是我调用函数的方式有问题?
tmplReplaceContent : function(json, tmpl, target) {
var regex = new RegExp("\{{[a-zA-Z\.\_]*\}}"),
view = '';
function setOutput(template) {
var content = Mustache.render(template, view);
$(target).html(content).hide().fadeIn();
}
function doJSON(json) {
view = json;
if(!regex.test(tmpl)){
/* get mustache tmpl from the path */
$.get(msi.vars.tmpl_url + tmpl + '.mustache', setOutput);
} else {
setOutput(tmpl);
}
}
/* json -> check if object */
if (typeof json === 'object') {
doJSON(json);
} else {
/* getJSON from the path */
$.getJSON(msi.vars.base_url + json, doJSON);
}
}
【问题讨论】:
-
您的代码有效,您的错误在其他地方。 jsfiddle.net/KzEEV
-
是的,我也这么认为,我也在这里测试过:mustache.github.com/#demo。 .我更新了问题,添加了一些可能是错误来源的代码。
-
我会以不同的方式实现
tmplReplaceContent函数,但它看起来对我来说并不太可疑。使用 Chrome 进行调试可能是个好主意。将其设置为“暂停未捕获的异常”并检查调用树和范围变量以了解发生了什么。 -
我试过了,但我不知道我应该如何检查它,我在范围变量上发现了一个异常,本地,看起来像
arguments: Array[2] 0: "search" 1: #document length: 2 __proto__: Array[0] get message: function () { [native code] } get stack: function () { [native code] } set message: function () { [native code] } set stack: function () { [native code] } type: "undefined_method" __proto__: Error -
在做了几次测试后,我发现这是关于胡子引擎的问题,当模板文件来自外部文件时会抛出错误。我找不到解决办法,我正在考虑将外部文件的内容保存到一个变量中,然后使用它。但我不知道怎么做。
标签: javascript template-engine mustache