Question

我使用mustache.js在我正在处理的Pyramid / sqlalchemy项目中呈现模板，但它们似乎不会在浏览器中呈现。我正在使用Chrome的firebug lite和开发者控制台进行调试。

这是我尝试使用的代码：

在顶部，在头部

<script type="text/javascript" src="/static/mustache.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

在体内

$(document).ready(function () { 

$(document.body).append('<div id =\"user\">hello here is some stuff <br /></div>');

var person = {
"title" : "Herr Doktor Professor", 
"firstname": "Don",
"lastname": "Johnson"
};


console.log(person);
var template = '<h1>Greetings, {{title}} {{firstname}} {{lastname}}</h1>';
console.log(template);
var user = Mustache.render(template, person);
console.log(user);
$('#user').append(user);
$(document.body).append(Mustache.render("{{title}} {{lastname}}", {title: "Doctor",     lastname: "Test"})); 
});

这里的愚蠢......呈现的HTML给了我

<h1>Greetings,   </h1>

现在...

console.log(person);
var template = '<h1>Greetings, {{title}} {{firstname}} {{lastname}}</h1>';
console.log(template);

控制台中的收益

Object {title: "Herr Doktor Professor", firstname: "Don", lastname: "Johnson"} 
<h1>Greetings,   </h1>

...此外

var user = Mustache.render(template, person);
console.log(user);

给我这个：

<h1>Greetings,   </h1>

最后一行的模板文字似乎什么也没做。

所以这里真的很奇怪..在控制台本身，如果我试试这个：

var template = '<h1>Greetings, {{title}} {{firstname}} {{lastname}}</h1>';

我明白了：

>template
"<h1>Greetings, {{title}} {{firstname}} {{lastname}}</h1>"

的Groovy！现在我做以下事情：

>var person = {
   "title" : "Herr Doktor Professor", 
   "firstname": "Don",
   "lastname": "Johnson"
  };

>person
Object {title: "Herr Doktor Professor", firstname: "Don", lastname: "Johnson"}
>var user = Mustache.render(template, person);
>user
"<h1>Greetings, Herr Doktor Professor Don Johnson</h1>"

类似地，最后一行代码上的模板文字似乎工作正常。

为什么这似乎在控制台中运行良好而在浏览器中根本没有？

Answer 1

看起来您的{{variable}}标记首先会被服务器端模板引擎解释。你用哪一个？ Jinja2的？

要确认 - 在浏览器中查看页面来源（Ctrl-U）并检查{{variable}}内容是否存在 - 很可能他们不会。

解决方案是尽量减少放在HTML页面中的内联JavaScript的数量 - 有几行配置是可以的，除此之外的任何内容都属于单独的文件。否则，您将从服务器端模板生成JavaScript，JavaScript会生成一个Mustache模板，该模板又会生成HTML ...仅适用于多个层

小胡子不在金字塔中渲染

1 个答案: