了解Backbone.js视图的集合和过滤/重置(来自路由器,事件等)

时间:2013-06-19 15:13:32

标签: backbone.js backbone.js-collections

我仍然对Backbone.js感到满意,并且有很多次我真的认为我得到了它 - 那么一些如此微不足道的东西突然出现并震撼我的世界并让我重新思考如果我得到它所有。这是其中一个时刻 - 任何帮助都会提前得到很大的赞赏。

我有一个视图。它有一个集合(视图显示每天每小时类型的事件的会话列表)。最初,首次创建视图时,我会显示整个Sessions集合。没关系。在视图的顶部,我有4个链接,每周的每一天(在我们的活动期间) - 10日,11日,12日,13日。我希望用户能够点击一天并过滤该特定日期的会话列表(就像我说的那样,非常简单)。

到目前为止,我的工作方式是这样的:

  1. Sessions Collection(基类)有一个名为filterByDay(day)的方法,它执行以下操作:

    filterByDay: function (day) {
        UGM.log('trying to filter by day of week: ' + day);
        return this.models.filter(function (s) {
            return moment.utc(s.get('StartTime')).format('DD') == day;
        });        
    }
    
  2. 使用完整会话集合创建并初始化视图。

    new UGM.SessionsCollectionView({ collection: UGM.data.sessionsData });
    
  3. 在我的收藏夹中 - 我有以下内容:

    events: {
        'click a.dayFilter':'filterByDay'
    },
    
    filterByDay: function (e) {
       e.preventDefault();
    
       var day = (this.$(e.currentTarget).attr('rel')*1);        
       this.render(this.collection.filterByDay(day));
       UGM.router.navigate("/sessions/" + day);
    }
    
  4. 所以..当View启动时,它显示完整的会话。具有dayFilter类的a标签适当地触发事件,并且View中的filterByDay调用Views render()方法传入NEW过滤集合(来自模型的方法)。到目前为止一直很好。

    1. 在我的控制器(路由器)中,我有以下内容(这是令人困惑的部分):

      showSessions: function (animate, level) {
          var section = new UGM.SessionsLayout({ collection: UGM.data.sessions });
          this.displaySection(section, 'root', 'sessions', animate);
      },
      showSessionsByDay: function(day, animate, level){
          //** Should the next line really be that convoluted?!?! **//
          var section = new UGM.SessionsLayout({ collection: new UGM.SessionsCollection(UGM.data.sessions.filterByDay(day)) });
          //** Why cant it just look like this: **//
          //var section = new UGM.SessionsLayout({ collection: UGM.data.sessions.filterByDay(day) });
      
          this.displaySection(section, 'root', 'sessions/' + day, false);
      },
      
    2. 请注意我在相关行上方的评论。我的所有问题(逻辑上)似乎源于我对于集合过滤器,collection.models过滤器以及filter()似乎总是返回数组而不是集合这一事实缺乏了解。 (这就是为什么我在上面的控制器的过滤器调用中声明一个新的基本集合。)

      对不起,这是令人困惑或没有意义,但希望有这么多的细节,有人可以在我的一般逻辑中看到一个非常明显的漏洞,以及如何处理该集合的开始。

      再次感谢您的帮助!!

1 个答案:

答案 0 :(得分:2)

你不能只做注释行的原因是因为filterByDay()返回的是模型数组,而不是模型集合。这意味着您的视图集合将不具有Backbone集合附带的功能。如果您不想重置原始集合(看起来不是这样),那么您就是在做最好的事情。一种更易读的方法(尽管代码完全相同)可能是:

showSessionsByDay: function(day, animate, level){
  var filteredCollection = new UGM.SessionsCollection(UGM.data.sessions.filterByDay(day));
  var section = new UGM.SessionsLayout({ collection: filteredCollection });

  this.displaySection(section, 'root', 'sessions/' + day, false);
},