Question

我使用本教程使用下划线模板。 http://backbonetutorials.com/what-is-a-view/

我有一种情况，我只想在p标签中添加一些文本到div结构。这不是一个模板只是一些需要注入一些值的文本。有没有办法使用下划线来更新本文中的变量。或者我是否需要将文本创建为模板，然后使用html（_template）

添加模板

<div id="popup">
<p>I want to add some text in here <%=variable1%>, Then add another variable text in here <%=variable2%></p>
</div>

更新：

我尝试使用此代码基于模板文档进行此操作。

<html>
<head>
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/underscore.js"></script>
   <script type="text/javascript" src="js/core.js"></script>
</head>
<body>
    <div id="popup">
    <div id="template_holder"></div>
    </div>

<!-- TEMPLATES FOR CANCEL PAYMENT MODEL -->
<script type="text/template" id="card-success_tmp">
    <p>I want to add some text in here <%=variable1%>, Then add another variable text in here <%=variable2%></p>
</script>
</body>
</html>

然后在我的核心js文件中，我在下面的代码中发现了我的弹出窗口

var variables = {variable1:'[xxxx]', variable2:'[MM/YY]'};
var template = _.template( $("#card-success_tmp").html(), variables );
$('#popup #template_holder').html(template);

但上述情况仍无效。

我甚至尝试过

var template = _.template( $("#card-success_tmp").html() );
$('#popup #template_holder').html(template({variable1:'[xxxx]', variable2:'[MM/YY]'}));

它呈现文本，但传入的变量不会被渲染。

如果我将模板添加为字符串而不是脚本标记，那么它将起作用。问题是为什么它不能使用脚本标记。它呈现文本而不是传递给它的变量。

var template = _.template( "<p>I want to add some text in here <%=variable1%>, Then add another variable text in here <%=variable2%></p>" );
$('#popup #template_holder').html(template({variable1:'[xxxx]', variable2:'[MM/YY]'}));

Answer 1

这不是一个模板，只需要注入一些值的文本。

这使它成为一个模板，不是吗？

正如Underscore docs提到的那样，您可以预先编译它：

var tmpl = _.template("<p>I want to add some text in here <%=variable1%>, Then add another variable text in here <%=variable2%></p>");

// often:
$("#popup").append(tmpl({variable1: "some text", variable2:"another variable text"}));

或直接称之为：

$("#popup").append(_.template(
    "<p>I want to add some text in here <%=variable1%>, Then add another variable text in here <%=variable2%></p>",
    {variable1: "some text", variable2:"another variable text"}
));

在您提供的代码段上：template_holder div具有id，而不是class属性。修复此问题，both of your codes正常工作。

Answer 2

我的代码无法工作的原因只是因为其他人遇到了同样的问题。我的模板位于.gsp文件中，该文件是grails应用程序文件。因此，当它呈现为html时，它会删除下划线标记，因为grails使用ERB语法进行注释。这里的关键是将ERB语法更改为mustache.js样式标记。为了让下划线知道发生了这种变化，您还必须为下划线添加一些默认设置。所以在你的js文件中只需在顶部添加它。

_.templateSettings.interpolate = /\{\{=(.+?)\}\}/g;
_.templateSettings.evaluate = /\{\{(.+?)\}\}/g;

然后您的模板代码可能如下所示。

<script type="text/template" id="card-success_tmp">
    <p>I want to add some text in here {{=variable1}}, Then add another variable text in here {{=variable2}}</p>
</script>

这是另一个很好的帖子。 Boolean checks in underscore templates

使用下划线更新元素

2 个答案: