Backbone.js - 在视图中过滤和显示集合数据的正确方法

问题描述

我在开始时加载了大量任务.
我想根据选定的列表/收件箱显示它们，这样每个列表就不会额外加载.

I have got a huge list of tasks loaded on the start.
I want to show them depending on selected list / inbox, so that there won't be additional loadings for each list.

window.Task = Backbone.Model.extend({});

window.TasksCollection = Backbone.Collection.extend({
    model: Task,
    url: '/api/tasks',
    inbox: function() {
        return this.filter(function(task) {
            return task.get('list') == null;
        });
    },
    list: function(id) {
        return this.filter(function(task) {
            return task.get('list') == id;
        });
    }
});

window.tasks = new TasksCollection;

window.TaskView = Backbone.View.extend({
    tagName: 'li',
    template: _.template($('#item-template').html()),
    initialize: function() {
        _.bindAll(this, 'render', 'close');
        this.model.bind('change', this.render);
        this.model.view = this;
    },
    render: function() {
        $(this.el).html(this.template(this.model.toJSON()));
        this.setContent();
        return this;
    },
});

window.TasksView = Backbone.View.extend({
    el: '#todo-list',
    collection: tasks,
    initialize: function() {
        _.bindAll(this, 'render');
        this.collection.bind('reset', this.render);
        this.collection.fetch();
    },
    render: function() {
        var t = this;
        $(t.el).html('');
        this.collection.each(function(task) {
            var view = new TaskView({ model:task });
            $(t.el).append( view.render().el );
        });
        return this;
    },
});

window.Nicetask = Backbone.Router.extend({
    routes: {
        '':             'inbox',
        '/inbox':       'inbox',
        '/list/:id':    'list',
    },
    initialize: function() {
        _.bindAll(this, 'inbox', 'list');
        window.tasksView = new TasksView;
    },
    inbox: function() {
        tasks.reset( tasks.inbox() );
    },
    list: function(id) {
        tasks.reset( tasks.list(id) );
    }
});

此代码有效，但 reset() 函数会从任务集合中删除实际列表中的其他任务.而在另一条路线上，任务集合是空的.

This code works, but the reset() function removes other tasks in actual list from tasks collection. And on another route, tasks collection is empty.

有什么合理的方法可以实现这一目标吗?感谢您的任何想法.

Is there any reasonable way to achieve this? thanks for any idea.

ps:骨干新手

更新

感谢@sled 和@ibjhb 的评论，这里是工作解决方案的片段.

Thx to @sled and @ibjhb for comments, here is snippet of working solution.

window.TasksView = Backbone.View.extend({
    el: '#todo-list',
    collection: Backbone.Collection.extend(),
    initialize: function() {
        _.bindAll(this, 'render', 'addOne', 'addAll');
        this.collection.bind('add', this.addOne);
        this.collection.bind('reset', this.render);
    },
    render: function(data) {
        $(this.el).html('');
        _.each(data, function(task) {
            this.addOne(task);
        }, this);
        return this;
    },
    addOne: function(task) {
        var view = new TaskView({ model:task });
        $(this.el).append( view.render().el );
    },
});

window.Nicetask = Backbone.Router.extend({
    routes: {
        '':             'inbox',
        '/inbox':       'inbox',
        '/today':       'today',
        '/list/:id':    'list',
    },
    initialize: function() {
        _.bindAll(this, 'inbox', 'today');
        window.tasksView = new TasksView;
        window.menuView = new MenuListView;
        tasks.fetch();
    },
    inbox: function() {
        tasksView.render( tasks.inbox() );
    },
    today: function() {
        tasksView.render( tasks.today() );
    },
    list: function(id) {
        tasksView.render( tasks.list(id) );
    }
});

推荐答案

我认为您需要使用另一个集合.例如，在您的收件箱中，执行以下操作:

I think you need to use another collection. For example, in your inbox, do this:

inbox: function(){
    currentCollection = new TasksCollection(tasks.inbox());
}

我还没有测试过，但是当你执行 .reset();您正在删除所有模型并加载传入的模型.

I haven't tested this but when you do a .reset(); you are removing all your models and loading the ones passed in.

这篇关于Backbone.js - 在视图中过滤和显示集合数据的正确方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！