Events CollectionView无法使用空集合进行渲染

为什么我的木偶收藏视图不能与空收藏一起使用

我试图在CompositeView中呈现CollectionView（它是项目列表中每个项目中的任务列表）。在我将空集合传递到CollectionView之前，一切正常。允许集合为空；项目可以很容易地不分配任务

Chrome显示的错误是

未捕获的TypeError:对象[Object Object]没有“on”方法

传入的项目集合是有效的

主干。集合

，以及由

任务集合

的筛选方法返回的任务列表，这就是我无法找出上面显示错误的原因

木偶网的CollectionView可以接受一个空集合（它有一个

emptyView

属性），那么为什么传入一个集合时它会给出一个错误呢？我假设它试图将事件绑定到集合，而集合应该“正常工作”——只有模型不存在

我的任务集合如下所示：

var TasksCollection = Backbone.Collection.extend({
    model: TaskModel,
    byProject: function(projectId) {
        var matches = this.filter(function(task) {
            return task.get('projectId') == projectId;
        }, this);

        return new TasksCollection (matches);
    },
    complete: function(state) {
        return new TasksCollection (this.where({ complete: state }));
    }
});

// Single task item
var TasksListView = Marionette.CollectionView.extend({
    tagName: 'ul',
    className: 'tasks nav nav-stacked nav-pills',
    itemView: Minuteboy.views.TaskItem,
    emptyView: Templates['partials/tasks-empty']
});

// Project item (should probably be a Layout or CompositeView)
var DashboardProject = Marionette.ItemView.extend({
    tagName: 'article',
    template: Templates['partials/dashboard-project'],
    initialize: function() {
        this.on('render', function() {
            var tasks = AllProjectTasks.byProject(this.model.get('id')).complete(false);

            this.$el.find('.tasks-wrapper').html(new TasksListView({ 
                collection: tasks
            }).render().el);
        });
    }
});

// Containing view with page title and container for projects list
var DashboardPage = Marionette.CompositeView.extend({
    template: Templates['pages/dashboard'],
    itemView: DashboardProject,
    itemViewContainer: '#content'
});

var page = new DashboardPage({
    collection: // A valid Backbone.Collection
});

var EmptyList = Marionette.ItemView.extend({
    tagName: 'li',
    template: Templates['partials/tasks-empty']
});

Minuteboy.views.TaskList = Marionette.CollectionView.extend({
    tagName: 'ul',
    className: 'tasks nav nav-stacked nav-pills',
    itemView: Minuteboy.views.TaskItem,
    emptyView: EmptyList
});

我的观点如下：

var TasksCollection = Backbone.Collection.extend({
    model: TaskModel,
    byProject: function(projectId) {
        var matches = this.filter(function(task) {
            return task.get('projectId') == projectId;
        }, this);

        return new TasksCollection (matches);
    },
    complete: function(state) {
        return new TasksCollection (this.where({ complete: state }));
    }
});

// Single task item
var TasksListView = Marionette.CollectionView.extend({
    tagName: 'ul',
    className: 'tasks nav nav-stacked nav-pills',
    itemView: Minuteboy.views.TaskItem,
    emptyView: Templates['partials/tasks-empty']
});

// Project item (should probably be a Layout or CompositeView)
var DashboardProject = Marionette.ItemView.extend({
    tagName: 'article',
    template: Templates['partials/dashboard-project'],
    initialize: function() {
        this.on('render', function() {
            var tasks = AllProjectTasks.byProject(this.model.get('id')).complete(false);

            this.$el.find('.tasks-wrapper').html(new TasksListView({ 
                collection: tasks
            }).render().el);
        });
    }
});

// Containing view with page title and container for projects list
var DashboardPage = Marionette.CompositeView.extend({
    template: Templates['pages/dashboard'],
    itemView: DashboardProject,
    itemViewContainer: '#content'
});

var page = new DashboardPage({
    collection: // A valid Backbone.Collection
});

var EmptyList = Marionette.ItemView.extend({
    tagName: 'li',
    template: Templates['partials/tasks-empty']
});

Minuteboy.views.TaskList = Marionette.CollectionView.extend({
    tagName: 'ul',
    className: 'tasks nav nav-stacked nav-pills',
    itemView: Minuteboy.views.TaskItem,
    emptyView: EmptyList
});

最后，我将页面视图实例化如下：

var TasksCollection = Backbone.Collection.extend({
    model: TaskModel,
    byProject: function(projectId) {
        var matches = this.filter(function(task) {
            return task.get('projectId') == projectId;
        }, this);

        return new TasksCollection (matches);
    },
    complete: function(state) {
        return new TasksCollection (this.where({ complete: state }));
    }
});

// Single task item
var TasksListView = Marionette.CollectionView.extend({
    tagName: 'ul',
    className: 'tasks nav nav-stacked nav-pills',
    itemView: Minuteboy.views.TaskItem,
    emptyView: Templates['partials/tasks-empty']
});

// Project item (should probably be a Layout or CompositeView)
var DashboardProject = Marionette.ItemView.extend({
    tagName: 'article',
    template: Templates['partials/dashboard-project'],
    initialize: function() {
        this.on('render', function() {
            var tasks = AllProjectTasks.byProject(this.model.get('id')).complete(false);

            this.$el.find('.tasks-wrapper').html(new TasksListView({ 
                collection: tasks
            }).render().el);
        });
    }
});

// Containing view with page title and container for projects list
var DashboardPage = Marionette.CompositeView.extend({
    template: Templates['pages/dashboard'],
    itemView: DashboardProject,
    itemViewContainer: '#content'
});

var page = new DashboardPage({
    collection: // A valid Backbone.Collection
});

var EmptyList = Marionette.ItemView.extend({
    tagName: 'li',
    template: Templates['partials/tasks-empty']
});

Minuteboy.views.TaskList = Marionette.CollectionView.extend({
    tagName: 'ul',
    className: 'tasks nav nav-stacked nav-pills',
    itemView: Minuteboy.views.TaskItem,
    emptyView: EmptyList
});

---

这是我的一个错误。我没有为CollectionView的

emptyView

属性使用某种视图对象，而是使用了一个模板（本例中为把手）。我的工作集合视图如下所示：

var TasksCollection = Backbone.Collection.extend({
    model: TaskModel,
    byProject: function(projectId) {
        var matches = this.filter(function(task) {
            return task.get('projectId') == projectId;
        }, this);

        return new TasksCollection (matches);
    },
    complete: function(state) {
        return new TasksCollection (this.where({ complete: state }));
    }
});

// Single task item
var TasksListView = Marionette.CollectionView.extend({
    tagName: 'ul',
    className: 'tasks nav nav-stacked nav-pills',
    itemView: Minuteboy.views.TaskItem,
    emptyView: Templates['partials/tasks-empty']
});

// Project item (should probably be a Layout or CompositeView)
var DashboardProject = Marionette.ItemView.extend({
    tagName: 'article',
    template: Templates['partials/dashboard-project'],
    initialize: function() {
        this.on('render', function() {
            var tasks = AllProjectTasks.byProject(this.model.get('id')).complete(false);

            this.$el.find('.tasks-wrapper').html(new TasksListView({ 
                collection: tasks
            }).render().el);
        });
    }
});

// Containing view with page title and container for projects list
var DashboardPage = Marionette.CompositeView.extend({
    template: Templates['pages/dashboard'],
    itemView: DashboardProject,
    itemViewContainer: '#content'
});

var page = new DashboardPage({
    collection: // A valid Backbone.Collection
});

var EmptyList = Marionette.ItemView.extend({
    tagName: 'li',
    template: Templates['partials/tasks-empty']
});

Minuteboy.views.TaskList = Marionette.CollectionView.extend({
    tagName: 'ul',
    className: 'tasks nav nav-stacked nav-pills',
    itemView: Minuteboy.views.TaskItem,
    emptyView: EmptyList
});

注意

itemView

行：

itemView: Minuteboy.views.TaskItem

这曾经是

itemView: Templates['partials/tasks-empty']

哪个是坏的