0

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

我有一种情况，我只想将 ap 标签中的一些文本添加到 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]'}));
4

2 回答 2

1

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

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

正如下划线文档所提到的，您可以预编译它：

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_holderdiv 有一个 id，而不是一个类属性。解决这个问题，你的两个 代码都可以工作。

于 2013-05-16T20:27:03.833 回答
0

我的代码无法正常工作的原因只是以防其他人遇到同样的问题。我的模板位于一个 .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>

这是另一个很好的帖子。下划线模板中的布尔检查

于 2013-05-17T13:53:23.083 回答