Javascript 避免在下划线上使用全局变量_Javascript_Html_Underscore.js_Template Engine

Javascript 避免在下划线上使用全局变量

javascript html

Javascript 避免在下划线上使用全局变量,javascript,html,underscore.js,template-engine,Javascript,Html,Underscore.js,Template Engine,我在使用时遇到了一个问题。无法正确渲染模板。看起来传递的变量需要是全局变量，但这是真的吗？我想避免这种情况。我收到以下错误：未捕获引用错误：未定义项。如果我使用items而不是var items，这些东西就会工作。但我想避免这种情况。我怎样才能修好它此代码是根据此代码改编的 index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l

我在使用时遇到了一个问题。无法正确渲染模板。看起来传递的变量需要是全局变量，但这是真的吗？我想避免这种情况。我收到以下错误：未捕获引用错误：未定义项。如果我使用items而不是var items，这些东西就会工作。但我想避免这种情况。我怎样才能修好它

此代码是根据此代码改编的

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>

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项、templateStr、templateFunction、呈现；
项目=[
{姓名：“亚历山大”}，
{名称：“巴克莱”}，
{姓名：“切斯特”}，
{名称：“多明戈”}，
{姓名：“爱德华”}，
{名称：“…”}，
{姓名：“约兰多”}，
{姓名：“扎卡里”}
];
templateStr=$（“#template”）.html（）；
templateFunction=u.template（templateStr）；
rendered=templateFunction（{myItems:items}）；
$（“#目标”）.html（呈现）；
}
render（）

项目名称：
非常感谢=）工作正常！