0

我有一个未呈现的 Underscore.js 模板。这个 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?

这个设置几乎等于我的代码。可能是什么问题呢？为什么模板甚至被编码？

4

2 回答 2

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/

希望这可以帮助！

于 2013-10-11T20:07:22.687 回答
0

你的方法非常好。您错过的是对.html(). 你的templateData变量搞砸了，因为.html()在这一行 -

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

转义内容。更改.html()为.text()，这应该有效。

http://jsfiddle.net/q5Q7e/

编辑：正确的方法-

以上不起作用，因为.text()只获取“文本”，跳过元素。您需要做的是，将您的模板添加到script标签而不是section标签中。这样，当您对元素进行调用时，您将获得未转义的 html（在标签上调用.html()时，jQuery 不会转义）。.html()script

在这里，进行此更改

老的

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

新的

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

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

于 2013-10-11T20:19:32.593 回答