Question

我能够在控制台中看到json数据，但是没有在html中显示。我不确定必须做什么改变才能在浏览器中进行渲染。这是我的代码。

Model.js

var agent = Backbone.Model.extend({ 

});

var agentList = Backbone.Collection.extend({ 
  model: agent,
  url: 'data/agents.json',
});

View.js

var agentListView = Backbone.View.extend({
  el: '.container', 

  initialize: function() {
    this.template = _.template( tpl.get('agentList'));
  },   

  render: function() {      
    var agents = new agentList();
    agents.fetch({
      success: function(agents) {
        console.log(agents.toJSON());
      }
    });
    this.$el.html(this.template({ AgentsList: agents.toJSON()}))
  },
});

HTML

  <% _.each(AgentsList, function(item) { %>           
  <tr>
  <td>data</td>
  <td><%= item.name%></td>
  <td><%= item.gender%></td>
  <td><%= item.birthYear%></td>
  <td><%= item.skills%></td>
  </tr>          
  <% }); %>

Answer 1

这可能是因为$el更新代码运行agents集合的时间尚未加载（获取）。

您可以使用下面的代码更新您的渲染方法，这样只有在从服务器返回集合提取时才会更新$el。

render: function() {
  var $this = this;
  var agents = new agentList();
  agents.fetch({
    success: function(agents) {
      console.log(agents.toJSON());
      $this.$el.html($this.template({ AgentsList: agents.toJSON() }));
    }
  });
}

或者你也可以听一下收集事件（可能是reset），只要从远程数据源获取数据就会触发 - 在这种情况下是json文件。

在这种情况下，视图代码可以是

var agentListView = Backbone.View.extend({
  el: '.container', 

  initialize: function() {
    this.template = _.template( tpl.get('agentList'));
    this.collection = new agentList();
    this.listenTo(this.collection, "reset", this.addAgentsToDom);
  },   

  render: function() {      
    this.collection.fetch({
      success: function(agents) {
        console.log(agents.toJSON());
      }
    });
  },

  addAgentsToDom: function(collection, options) {  // please name the method whatever you want :)
    this.$el.html(this.template({ AgentsList: this.collection.toJSON() }));
  }
});

Answer 2

问题是您没有在回调中渲染视图，因此您将无法显示任何内容。

此外，如果你想尊重MVC原则，那么在渲染函数中获取代理列表绝对不是要做的事情。你应该有类似的东西：

var agentCol = new AgentList();
var agentView = new AgentListView({collection: agentCol});

agentCol.fetch({
  success: function() {
    agentView.render();
  }
});

并且您的AgentListView应该看起来像

var AgentListView = Backbone.View.extend({
  el: '.container',

  initialize: function() {
    this.template = _.template(tpl.get('agentList'));
  },   

  render: function() {
    this.$el.html(this.template({ agents: this.collection.toJSON()}));
  },
});

（我冒昧地重命名一些变量来匹配命名约定）

Backbone - json数据不在浏览器中显示，而是在控制台中呈现

2 个答案: