我的Backbone.View无法渲染 [英] My Backbone.View won't render

问题描述

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

I reorganized my fully-working Backbone.js project and moved all my models, collections and views into separate files, and did a little rewriting, and now it won't render. I've tried everything I can think of. Any tips?

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

推荐答案

我注意到的几件事:

1. Backbone.View 没有模型属性.只有 Backbone.Collection 具有模型属性，主干将使用该属性使用指定的模型创建模型的实例构造函数(蓝图)和传递给它的数据.

1. Backbone.View does not have a model property. Only Backbone.Collection has a model property, which backbone will use to create an instance of model using the specified model constructor (blueprint) and data passed to it.

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

But views doesn't have a functionality like this (as far as I know). People usually pass an instance of a specific type of model with the options while creating a view, that's not the same as specifying a model property which points to a model constructor in the View's constructor.

sessionList似乎不是模型的实例(，因为它是在视图的构造函数中指定的.如果是实例，它将被所有SessionListView实例共享，而不是在大多数情况下是期望的行为)，并且似乎是undefined

sessionList doesn't seems to be an instance of a model (since it is specified in the view's constructor. If it's an instance it'll be shared by all the SessionListView instances which is not the desired behavior in most cases) and seems to be undefined

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

in the following:new SessionView({model: Session}); Session doesn't look like an instance of a model (Doesn't start with a capital letter, hoping you're following naming conventions) and also seems to be undefined

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

Well nothing is stopping you from specifying a model constructor in view's constructor or passing a model constructor into the view, but then you should make an instance of it (mostly while initializing) inside the view to work with. In other words you can not do blueprintOfAModel.bind('change'..); and you should build an actual model for the view to work with.

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

You seems to be creating new SessionListView in the render method of SessionListView itself with var view = new sessionListView(); won't that create infinite number of SessionListView instances when you simply try to create one..?

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

Well by looking at it again, you are not calling the actual constructor SessionListView with the new operator, but with an instance of it (sessionListView) which is likely to throw an error.

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

Both SessionView and SessionListView points to the same element, which seems weird. I haven't seen people doing that before since modifying the el of one view will have an impact on the other view, which is not desired in most practical cases.

还可以通过名称来判断，因为您具有 session 的 list 视图，所以SessionView不应指向具有id选择器的特定元素.您应该为每个SessionView实例创建一个新元素.如果您不指定el属性，Backbone会为您完成此操作.

Also judging by the names, since you have a list view of session, SessionView should not be pointing to a particular element with an id selector. You should create a new element for each SessionView instance. Backbone will do that for you if you don't specify el property.

(我会说您创建了一个无意的混乱，只需稍加重写即可:)

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

To make sense, your code should look somewhat like the following. Note that things starting with capital letter are constructor functions and things starting with small letters are object instances

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无法渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！