Backbone.js视图不会在页面加载时显示，但在控制台中与jQuery一起使用

Question

我正在尝试为Rails api创建一个Backbone.js前端，我遇到了一个问题。我已经能够从api中提取数据并将其放入单个视图和集合视图中。问题是数据肯定存在，我可以在控制台中运行一个jQuery命令，它会正确地将它附加到页面，但是，当页面加载时它不会显示。似乎javascript文件可能没有以正确的顺序加载，所以我尝试重新排列application.js没有运气。我已经研究了很多，找不到任何与此直接相关的内容，而且我是Backbone.js的初学者，所以我可能会以错误的方式解决这个问题。任何帮助，将不胜感激。这是我的代码：

singleUserModel.js

singleUser = Backbone.Model.extend({
  defaults: {
    name: null
  }
});

userCollection.js

userCollection = Backbone.Collection.extend({
  model: singleUser,
  url: 'http://localhost:3000/users'
});

singleUserView.js

singleUserView = Backbone.View.extend({

  tagName: 'li',

  template: _.template("<%= name %>"),

  render: function() {
    var userTemplate = this.template( this.model.toJSON());
    this.$el.html(userTemplate);
    return this;
  }

});

userCollectionView.js

allUsersView = Backbone.View.extend({

  tagName: 'ul',

  initialize: function( initialUsers ) {
    this.collection = new userCollection();
    this.collection.fetch({reset: true});
    this.render();

    this.listenTo(this.collection, 'add', this.renderUser);
    this.listenTo(this.collection, 'reset', this.render)
  },

  render: function() {
    this.collection.each(function(item) {
      this.renderUser(item);
    }, this);
  },

  renderUser: function( item ) {
    var user = new singleUserView({
      model: item
    });
    this.$el.append(user.render().el);
  }
});

main.js

var userGroupView = new allUsersView();
$('#allUsers').html(userGroupView.el);

在控制台中使用此命令将正确显示在页面上。

$('#allUsers').html(userGroupView.el);

Answer 1

脚本可能比页面上#allUsers更早执行。当您在控制台中运行它时，页面已经加载，因此该元素已在页面上呈现。

您应该将此函数调用放在DOMContentLoaded中，可以使用jquery的构造函数速记$(function() { /* your code here */ })进行注册。这将确保在您尝试查询#allUsers元素之前呈现DOM。另请注意，如果您正在异步加载数据并且仅在加载数据后存在#allUsers，则应在呈现内容后调用该函数。但如果是这种情况，你必须自己解决。

另外，一个有用的提示：永远不要依赖正确顺序加载的.js文件，否则你会遇到不好的时间。