Question

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

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()函数会从任务集合中删除实际列表中的其他任务。在另一条路线上，任务收集是空的。

有没有合理的方法来实现这一目标？谢谢你的任何想法。

ps：骨干新手

更新

请访问@sled和@ibjhb以获取评论，这里是工作解决方案的片段。

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

Answer 1

我认为你需要使用另一个系列。例如，在您的收件箱中，执行以下操作：

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

我没有测试过这个，但是你做了.reset（）;你要移除所有模型并加载传入的模型。

Answer 2

@sled你发布的代码中存在拼写错误，请参阅内联评论。你把它作为项目发布在某个地方了吗？

// add models
add: function(models, options) {
  // TYPO: next line was missing, so single models not handled.
  models = _.isArray(models) ? models.slice() : [models];

  var self = this;

  models = _.filter(models, this.filter);

  // return if no models exist
  // TYPO: returned undefined, so was not chainable
  if(models.length == 0) { return this; }

  // actually add the models to the superset
  this.superset.add(models, options);
  return this;
},

// remove models
remove: function(models, options) {
  // TYPO: next line was missing, so single models not handled.
  models = _.isArray(models) ? models.slice() : [models];

  // remove model from superset
  this.superset.remove(_.filter(_.filter(models, function(cm) {
    // TYPO: not 'm != null', causes error to be thrown
    return cm != null;
  }), this.filter), options);
  // TYPO: missing return so not chainable
  return this;
},

Answer 3

对您的解决方案进行一次快速修正，您正在使用

$(this.el).html('');

我的理解是你的视图和相关的事件绑定仍然存在于浏览器内存中，所以你理想情况下需要在TaskView上使用view.remove（）来正确清除事件绑定以及html。

这是对答案略有不同的看法，因为我一直在寻找类似问题的解决方案，希望这对其他人有帮助。

我的问题： - 按模型的属性过滤完整的集合。例如。用户单击模型视图，获取（某些）属性的列表，选择属性过滤集合以仅显示具有相同值的集合。

我正在采取的路线是从视图中调用集合上的方法，在我的例子中，视图特定于模型，所以：

this.model.collection.myFilter(attr,val);

其中attr是与集合关联的模型的属性，然后在过滤器中类似

myFilter: function(attr, val){
    var groupByAttr = this.groupBy(function(article){
        var res = (val === undefined)? true : (article.get(attr) == val);
        article.set({selected:res});
        return res;
    });
    return groupByAttr;
}

我使用了 ._ groupBy ，因为这会返回2个可能有用的数组（正/负）。通过将mode属性设置为“selected”，并在模型视图中绑定到此属性，我可以轻松切换显示或隐藏视图的类。

if（val === undefined）作为清除过滤器的简单方法添加，方法是调用没有值的相同方法。

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

3 个答案: