Question

我有一个未呈现的Underscore.js模板。我的问题在this JSFiddle中解释。

// this string will get loaded by an ajax call and put in a variable when the application starts
var allTemplates = '<section id="header">header template</section>    <section id="content"><% var test = 10 %><%= test %></section>"';

// put it in the DOM to parse it with jQuery
$('#test').html(allTemplates);




var getSpecificTemplate = function(templateID) {
    return $('#test').find('#' + templateID).html();   
};

var templateData = getSpecificTemplate('content');

// expected log output: 10
// actual log output: &lt;% var test = 10 %&gt;&lt;%= test %&gt; 
console.log( _.template(templateData, {}) );

// why?

此设置几乎与我的代码相同。可能是什么问题呢？为什么模板甚至编码？

Answer 1

如果我理解正确，你没有评估你的模板，你附加一个文字字符串。

更改此内容：$('#test').html(allTemplates);

到此：

var templateString = _.template(allTemplates, {});
$('#test').html(templateString);

然后，您会在console.log()中看到预期的结果，同样在您的console.log()中，您只需输入以下内容：

var templateData = getSpecificTemplate('content');
console.log(templateData);

小提琴：http://jsfiddle.net/KyleMuir/my3NW/6/

希望这有帮助！

Answer 2

你的方法非常好。您错过的是致电.html()。您的templateData变量搞砸了，因为此行中的.html() -

return $('#test').find('#' + templateID).html();

逃避内容。将.html()更改为.text()，这应该有效。

http://jsfiddle.net/q5Q7e/

编辑：正确的方法 -

上述方法不起作用，因为.text()只获取'text'，跳过元素。您需要做的是，将模板添加到script标记而不是section标记中。这条路，当您对元素进行.html()调用时，您将获得未转义的html（在.html()标记上调用script时，jQuery不会进行转义。

在这里，进行此更改

OLD

var allTemplates = '<section id="header">header template</section>    <section id="content"><% var test = 10 %><%= test %></section>"';

NEW

var allTemplates = '<section id="header">header template</section>    <script type="text/template" id="content"><a href="#“><% var test = 10 %><%= test %></a></script>"';

我无法使用jsfiddle.net，所以这里有一个plnkr.co

下划线模板不会被渲染。为什么？

2 个答案: