1

我仍然对 Backbone.js 感到满意，并且有很多次我真的认为我得到了它——然后一些如此微不足道的东西突然出现并震撼了我的世界，让我重新思考如果我能得到它。这是那些时刻之一 - 任何帮助都提前非常感谢。

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

到目前为止，我的工作方式是这样的：

  1. Sessions 集合（基类）具有名为 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);
}

所以..当视图启动时，它会很好地显示完整的会话。带有 dayFilter 类的 a 标记会适当地触发事件，并且 View 中的 filterByDay 调用传入新过滤集合（来自模型的方法）的 Views render() 方法。到目前为止还不错。

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

请注意我在相关行上方的评论。我所有的问题（逻辑上）似乎都源于我对集合过滤器、collection.models 过滤器的确切方式缺乏了解，以及 filter() 似乎总是返回一个数组而不是一个集合这一事实。（这就是为什么我在上面的控制器的过滤器调用中声明一个新的基础集合）。

抱歉，这令人困惑或没有意义，但希望有了这么多的细节，有人可以在我的一般逻辑中看到一个非常明显的漏洞，即我如何处理收集开始。

再次感谢任何帮助！！

4

1 回答 1

2

您不能只执行注释掉的行的原因是 filterByDay() 返回模型数组，而不是模型集合。这意味着您的视图集合将不具有与主干集合一起提供的功能。如果您不想重置您的原始收藏（看起来您不想这样做），那么您正在做下一件最好的事情。一种更易读的方法（尽管它是完全相同的代码）可能是：

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);
},
于 2013-06-19T16:57:02.477 回答