Backbone.js的 - 过滤的正确方法和显示的数据收集在一个视图中 [英] Backbone.js - Correct way of filtering and displaying collection data in a view

问题描述

我有一个巨大的装上开始的任务列表。结果
我想向他们展示取决于选择的列表/收件箱，这样不会有每个列表的附加载荷。

window.Task = Backbone.Model.extend（{}）;window.TasksCollection = Backbone.Collection.extend（{
    型号：任务，
    网址：'/ API /任务，
    收件箱：功能（）{
        返回this.filter（函数（任务）{
            返回task.get（名单）== NULL;
        }）;
    }，
    清单：函数（ID）{
        返回this.filter（函数（任务）{
            返回task.get（名单'）== ID;
        }）;
    }
}）;window.tasks =新TasksCollection;window.TaskView = Backbone.View.extend（{
    标签名：礼，
    模板：_.template（$（'＃项目模板）HTML（）。）
    初始化：功能（）{
        _.bindAll（这一点，'渲染'，'关闭'）;
        this.model.bind（'变'，this.render）;
        this.model.view =这一点;
    }，
    渲染：功能（）{
        $（this.el）的.html（this.template（this.model.toJSON（）））;
        this.setContent（）;
        返回此;
    }，
}）;window.TasksView = Backbone.View.extend（{
    EL：＃待办事项列表'，
    收藏：任务，
    初始化：功能（）{
        _.bindAll（这一点，'渲染'）;
        this.collection.bind（复位，this.render）;
        this.collection.fetch（）;
    }，
    渲染：功能（）{
        VAR T =这一点;
        $（t.el）的.html（''）;
        this.collection.each（函数（任务）{
            VAR视图=新TaskView（{模式：任务}）;
            $（t.el）.append（view.render（）EL）;
        }）;
        返回此;
    }，
}）;window.Nicetask = Backbone.Router.extend（{
    路线：{
        ''：收件箱，
        /收件箱：收件箱，
        '/名单/：身份证'：'清单'，
    }，
    初始化：功能（）{
        _.bindAll（这一点，'收件箱'，'名单'）;
        window.tasksView =新TasksView;
    }，
    收件箱：功能（）{
        tasks.reset（tasks.inbox（））;
    }，
    清单：函数（ID）{
        tasks.reset（tasks.list（ID））;
    }
}）;


这code工作，但复位（）函数删除从任务收集实际列表其他任务。和另一条路线，任务集合为空。

有任何合理的方式来实现这一目标？感谢您的任何想法。

PS：新手骨干

---

更新

THX到@sled和@ibjhb征求意见，这里是工作液的片段。

window.TasksView = Backbone.View.extend（{
    EL：＃待办事项列表'，
    集合：Backbone.Collection.extend（）
    初始化：功能（）{
        _.bindAll（在此，呈现，addOne'，'的addAll'）;
        this.collection.bind（添加，this.addOne）;
        this.collection.bind（复位，this.render）;
    }，
    渲染：功能（数据）{
        $（this.el）的.html（''）;
        _.each（数据，功能（任务）{
            this.addOne（任务）;
        }， 这个）;
        返回此;
    }，
    addOne：函数（任务）{
        VAR视图=新TaskView（{模式：任务}）;
        $（this.el）.append（view.render（）EL）;
    }，
}）;window.Nicetask = Backbone.Router.extend（{
    路线：{
        ''：收件箱，
        /收件箱：收件箱，
        '/今天'：'今天'，
        '/名单/：身份证'：'清单'，
    }，
    初始化：功能（）{
        _.bindAll（这一点，'收件箱'，'今天'）;
        window.tasksView =新TasksView;
        window.menuView =新MenuListView;
        tasks.fetch（）;
    }，
    收件箱：功能（）{
        tasksView.render（tasks.inbox（））;
    }，
    今日：功能（）{
        tasksView.render（tasks.today（））;
    }，
    清单：函数（ID）{
        tasksView.render（tasks.list（ID））;
    }
}）;


解决方案

我认为你需要使用另一个集合。例如，在您的收件箱，这样做：

 的收件箱：功能（）{
    currentCollection =新TasksCollection（tasks.inbox（））;
}
 

我没有测试过这一点，但，当你做一个.reset段（）;要删除所有模型和装载传入的人。

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

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: backbone novice

---

UPDATE

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

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的 - 过滤的正确方法和显示的数据收集在一个视图中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！