我的Backbone.View无法渲染

Question

我重新组织了可以正常工作的Backbone.js项目，并将所有模型，集合和视图移到了单独的文件中，并做了一些重写，但现在无法渲染。 我已经尝试了所有我能想到的。 有小费吗？

var SessionView = Backbone.View.extend({
    model: Session,
    el: '#list',
    template:  _.template($('#session-template').html()),
    initialize: function () {
        this.model.bind('change', _.bind(this.render, this));
        this.render();
    },
    render: function () {
        this.$el.html(this.template({sessions: sessionList}));
        return this;
    }
});
var sessionView = new SessionView();

var SessionListView = Backbone.View.extend({
    el: '#list',
    model: sessionList,
    initialize: function () {
        sessionList.bind('add', this.add, this);
        sessionList.bind('reset', this.add, this);
        sessionList.fetch();
    },
    render: function () {
        var view = new sessionListView();
        this.$el.append(view.render().el);
        new SessionView({model: Session});
        return this;
    }
});

var sessionListView = new SessionListView();

Answer 1

我注意到的几件事：

1. Backbone.View没有模型属性。 只有Backbone.Collection具有model属性，该主干将使用指定的模型构造函数 （ blueprint ）和传递给它的数据来创建模型的实例。

   但是视图没有这样的功能（ 据我所知 ）。 人们通常在创建视图时传递带有选项的特定类型模型的实例 ，这与在View的构造函数中指定指向模型构造函数的model属性不同。

   sessionList似乎不是模型的实例（ 因为它是在视图的构造函数中指定的。如果它是一个实例，那么它将由所有SessionListView实例共享，这在大多数情况下不是期望的行为 ），并且似乎是undefined

   在以下内容中： new SessionView({model: Session}); Session看起来不像是模型的实例（ 不是以大写字母开头，希望您遵循命名约定 ），并且似乎也undefined

   没什么能阻止您在视图的构造函数中指定模型构造函数或将模型构造函数传递到视图中，但是您应该在视图内部创建它的实例（ 主要是在初始化时 ）。 换句话说，您不能执行blueprintOfAModel.bind('change'..); 并且您应该为视图创建一个实际的模型。

2. 您似乎正在使用var view = new sessionListView();在SessionListView本身的render方法中创建新的SessionListView var view = new sessionListView(); 当您仅尝试创建一个实例时，不会创建无限数量的SessionListView实例吗？

   好了，通过再次查看它，您并没有使用new运算符调用实际的构造函数SessionListView ，而是使用了它的一个实例（ sessionListView ），这很可能会引发错误。

3. SessionView和SessionListView指向同一个元素，这看起来很奇怪。 我以前从未见过这样做的人，因为修改一个视图的el将影响另一个视图，这在大多数实际情况下都是不希望的。

   同样通过名称来判断，因为您具有session的列表视图， SessionView不应指向具有id选择器的特定元素。 您应该为每个SessionView实例创建一个新元素。 如果您不指定el属性，Backbone将为您完成此操作。

（ 我想说您通过一点重写就创建了一个意外的混乱：)

---

有道理，你的代码应该看起来有点像下面。 请注意，以大写字母开头的内容是构造函数，而以小写字母开头的内容是对象实例

var Session = Backbone.Model.extend({
  defaults: {},
  initialize: function() {}
});
var SessionList = Backbone.Collection.extend({
  model: Session,
  initialize: function() {}
});
var SessionView = Backbone.View.extend({
  initialize: function() {
    this.model.bind('change', _.bind(this.render, this));
    this.render();
  },
  template: _.template($('#session-template').html()),
  render: function() {
    this.$el.html(this.template({
      session: this.model
    }));
    return this;
  }
});
var SessionListView = Backbone.View.extend({
  el: '#list',
  initialize: function() {
    this.collection.bind('add', this.add, this); // method doesn't exist, should throw error
    this.collection.bind('reset', this.add, this); // same here
    this.collection.fetch();  // <--- watch out, this happens asynchronously
  },
  render: function() {
    // iterate through collection, create instances of SessionView and append to el
    return this;
  }
});

var sessionList = new SessionList(); // will create n number of Session instances in future

var sessionListView = new SessionListView({ // will create n number of SessionView instances in future
  collection: sessionList
});