我在使用 underscorejs 时遇到问题。无法正确渲染模板。看起来传递的变量需要是全局的，但真的是这样吗？我想避免这种情况。我收到此错误: Uncaught ReferenceError :项目未定义。如果我使用 items 而不是 var items，那么事情就会起作用。但我想避免这种情况。我该如何修复它？
此代码改编自此 question .
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script data-main="index" src="require.min.js"></script>
</head>
<body>
<script id='template' type="text/x-underscore">
<table cellspacing='0' cellpadding='0' border='1' >
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<%
// repeat items
_.each(items,function(item,key,list){
// create variables
var f = item.name.split("").shift().toLowerCase();
%>
<tr>
<!-- use variables -->
<td><%= key %></td>
<td class="<%= f %>">
<!-- use %- to inject un-sanitized user input (see 'Demo of XSS hack') -->
<h3><%- item.name %></h3>
<p><%- item.interests %></p>
</td>
</tr>
<%
});
%>
</tbody>
</table>
</script>
<div id="target"></div>
</body>
</html>
index.js:
var application = {
initialize: function() {
this.load();
},
jsPool: [
'jquery-1.11.2.min.js',
'underscore-min.js',
],
load: function() {
define(
this.jsPool,
this.onReady
);
},
onReady: function() {
render();
}
};
application.initialize();
function render() {
var items = [
{name:"Alexander"},
{name:"Barklay"},
{name:"Chester"},
{name:"Domingo"},
{name:"Edward"},
{name:"..."},
{name:"Yolando"},
{name:"Zachary"}
];
var template = $("#template").html();
$("#target").html(_.template(template,{items:items}));
}
最佳答案
我对 _.template() API 的理解是，它返回一个函数，您可以通过使用数据元素调用它来执行该函数。尝试 _.template(template)({items:items})。一个简化的演示是内联的。
var render = function() {
var items, templateStr, templateFunction, rendered;
items = [
{name:"Alexander"},
{name:"Barklay"},
{name:"Chester"},
{name:"Domingo"},
{name:"Edward"},
{name:"..."},
{name:"Yolando"},
{name:"Zachary"}
];
templateStr = $("#template").html();
templateFunction = _.template(templateStr);
rendered = templateFunction({myItems:items});
$("#target").html(rendered);
}
render();<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>
<script id='template' type="text/x-underscore">
<% _.each(myItems, function(item, key, list) { %>
<p>item.name: <%= item.name %></p>
<% }); %>
</script>
<div id="target"></div>关于javascript - 避免在 underscorejs 上使用全局变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29301501/