Question

我正在使用带有jquery和rails的Backbone.js。我有一个模型播放器和收集播放器。在初始化时，我加载所有玩家以使用PlayersView进行查看。

我想添加按位置过滤玩家的功能，并相应地重新渲染PlayersView。我已经给了它一个镜头，但目前它只是重新加载所有玩家并且不会过滤。请告诉我是否/如何修改！感谢。

/* Models/Collections */
var Player = Backbone.Model.extend({
  url: function() {
    return this.id ? '/projects/' + this.id : '/projects'; 
  },

  initialize: function(){
  },
});

var Players = Backbone.Collection.extend({
  model: Player,
  url: '/players.json',

  sortPosition : function(position){
    return _(this.filter(function(data) {
        return data.get("position") == position;
    }));
  },
});

和

// view // players //
var PlayersView = Backbone.View.extend({
  el: '#players',

  events: {
    'click .position': 'sort',  
  },

  initialize: function(){
    this.bind("reset", this, 'render', 'sort'); // remember: every function that uses 'this' as the current object should be in here
    this.render();      
  },
  render: function(){
    $('#players').show();

    players.each(function(player){
      firstname = player.get('first_name');
      lastname = player.get('last_name');
      position = player.get('position');
      team = player.get('team');
      $('#players-list').append('<li><span class="player-position">' + position + '</span><span class="player-name">' + firstname + ' ' + lastname + '</span><span class="player-team">' + team + '</span></li>')
    });

    return this;
  },
  sort: function(e){
    var position = $(e.currentTarget).attr('data-pos');
    this.render(players.sortPosition(position));
  },
});

似乎我的问题是我再次调用'渲染'，这需要所有玩家并且不接受过滤集。如果我可以提供更多代码，请告诉我们！

非常感谢。

Answer 1

我没时间完全调试你的代码，因为还缺少一些（宣言）。

但我已经看到了一些可以改进的事情，

1）您将players.sortPosition(position)传递给渲染函数，但渲染函数不接受任何参数。

我认为最好单独进行，通过已排序的集合替换视图的集合，并再次调用渲染：

sort: function(e) {
    this.collection = players.sortPosition(position);
    this.render();
}

2）你在初始化函数

中有一个奇怪的eventbinding结构

我从来没有见过这样：

initialize: function(){
    this.bind("reset", this, 'render', 'sort'); // remember: every function that uses 'this' as the current object should be in here
    this.render();      
},

如果您只想在绑定函数中使用this，那么

您的意图究竟是什么？您可以使用_.bindAll(this, "function1", function2", ... , "render");如果要绑定某个特定事件，例如“重置”，我会写：this.bind('reset', this.render, this);

Answer 2

我知道这篇文章有点陈旧，但您可以使用Backbone的比较器对集合进行排序。

 var Players = Backbone.Collection.extend({
   model: Player,
   url: '/players.json',

   initialize : function(){
     _.bindAll(this);
     this.fetch();
   },
   comparator: function(player){
     return player.get('position')
   }
 });

这样，无论何时创建此集合的实例，集合中的模型都会按位置自动排序。

Backbone.js - 过滤集合并重置视图

2 个答案: