Javascript 从ajax调用获取数据并填充模板

我试图使用主干线和下划线显示从ajax调用获取的数据

在FF中，它可以工作，但Chrome报告了一个错误：

uncaughtreferenceerror:数据未定义

（数据指的是模板数据

）

请看下面我的代码

收藏：

define(['backbone','models/aModel'], function(Backbone, aModel) {
  var aCollection =  Backbone.Collection.extend({       
    url: "api/a",
    model: aModel,
    parse: function(response){              
      return response.data; 
    }       
  });
  return aCollection;
});

define(['jquery','underscore','backbone','models/aModel','collections/aCollection','text!templates/a.html'], function($, _, Backbone, aModel, aCollection,  aTemplate){
      var aView = Backbone.View.extend({
        render: function() {
          var self = this;
          this.collection = new aCollection();
          this.collection.fetch({
            success: function(collection, response) {
              self.$el.html(_.template(aTemplate, {data:self.collection.toJSON()}));
            },
            error: function(collection, response) {
               alert("error");
            }
          });       
          return this;
        },      
      });
      return aView;
    });

<% _.each(data, function(g) { %> 
  <tr>
    <td><%=g.a%></td>
    <td><%=g.b%></td>
    <td><%=g.c%></td>
    <td><%=g.d%></td>
  </tr> 
<% }); %>

{"data": [{"a":"1","b":"name1","c":"0000-00-00","d":x},{"a":"2","b":"name2","c":"0000-00-00","d":y}]}

型号：

define(['underscore', 'backbone'], function(_, Backbone) {
  var aModel = Backbone.Model.extend({
    urlRoot: 'api/b',
  });
  return aModel;
});

查看：

define(['backbone','models/aModel'], function(Backbone, aModel) {
  var aCollection =  Backbone.Collection.extend({       
    url: "api/a",
    model: aModel,
    parse: function(response){              
      return response.data; 
    }       
  });
  return aCollection;
});

define(['jquery','underscore','backbone','models/aModel','collections/aCollection','text!templates/a.html'], function($, _, Backbone, aModel, aCollection,  aTemplate){
      var aView = Backbone.View.extend({
        render: function() {
          var self = this;
          this.collection = new aCollection();
          this.collection.fetch({
            success: function(collection, response) {
              self.$el.html(_.template(aTemplate, {data:self.collection.toJSON()}));
            },
            error: function(collection, response) {
               alert("error");
            }
          });       
          return this;
        },      
      });
      return aView;
    });

<% _.each(data, function(g) { %> 
  <tr>
    <td><%=g.a%></td>
    <td><%=g.b%></td>
    <td><%=g.c%></td>
    <td><%=g.d%></td>
  </tr> 
<% }); %>

{"data": [{"a":"1","b":"name1","c":"0000-00-00","d":x},{"a":"2","b":"name2","c":"0000-00-00","d":y}]}

模板：

define(['backbone','models/aModel'], function(Backbone, aModel) {
  var aCollection =  Backbone.Collection.extend({       
    url: "api/a",
    model: aModel,
    parse: function(response){              
      return response.data; 
    }       
  });
  return aCollection;
});

define(['jquery','underscore','backbone','models/aModel','collections/aCollection','text!templates/a.html'], function($, _, Backbone, aModel, aCollection,  aTemplate){
      var aView = Backbone.View.extend({
        render: function() {
          var self = this;
          this.collection = new aCollection();
          this.collection.fetch({
            success: function(collection, response) {
              self.$el.html(_.template(aTemplate, {data:self.collection.toJSON()}));
            },
            error: function(collection, response) {
               alert("error");
            }
          });       
          return this;
        },      
      });
      return aView;
    });

<% _.each(data, function(g) { %> 
  <tr>
    <td><%=g.a%></td>
    <td><%=g.b%></td>
    <td><%=g.c%></td>
    <td><%=g.d%></td>
  </tr> 
<% }); %>

{"data": [{"a":"1","b":"name1","c":"0000-00-00","d":x},{"a":"2","b":"name2","c":"0000-00-00","d":y}]}

这就是解决办法 替换此项：

self.$el.html(_.template(aTemplate, {data:self.collection.toJSON()}));

为此：

var compiledTemplate = _.template(aTemplate);
self.$el.html(compiledTemplate({data:self.collection.toJSON()}));

---

为了提供帮助，我创建了一个JSFIDLE

这是我在谷歌浏览器上的作品。如果你照这个做，我想你的问题会解决的

$（函数（）{ var compiled=35;.template（$（“#template”）.html（）

}))

---

我猜变量“aTemplate”不是用chrome编译的。

你的回答帮助我找到了解决方案，我只是将“编译”和“提供数据”拆分为模板，它的工作原理……将更新我自己的帖子