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

我注意到的一些事情：

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

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

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

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

没有什么能阻止你在视图的构造函数中指定模型构造函数或将模型构造函数传递给视图，但是你应该在视图中创建它的一个实例（主要在初始化时）与...合作。换句话说，你不能blueprintOfAModel.bind('change'..);，你应该为视图构建一个实际模型。
您似乎在SessionListView render方法中创建新SessionListView var view = new sessionListView();本身SessionListView不会创建无限数量的SessionListView你只是尝试创建一个实例..？

再看一遍，你不是用new运算符调用实际的构造函数sessionListView，而是用它的一个实例（SessionView）来调用它错误。
SessionListView和el都指向同一个元素，这看起来很奇怪。我之前没有看到人们这样做，因为修改一个视图的SessionView会对另一个视图产生影响，这在大多数实际情况下是不可取的。

同样根据名称判断，因为您有会话的列表视图，id不应该指向具有{{1}的特定元素选择器。您应该为每个SessionView实例创建一个新元素。如果您未指定el属性，Backbone将为您执行此操作。

（我说你创造了一个无意识的混乱，但没有重写：）

有意义的是，您的代码应该看起来像，如下所示。请注意，以大写字母开头的内容是构造函数函数，以小写字母开头的内容是 object 实例

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
});

我的Backbone.View不会渲染

1 个答案: