2013-06-19 69 views
1

我仍然對Backbone.js感到滿意,而且有很多次我真的認爲我得到它 - 然後如此微不足道的彈出和岩石我的世界,讓我重新思考,如果我什至得到它。這是其中的一個時刻 - 任何幫助都可以提前感謝。理解Backbone.js視圖的集合和過濾/重置(從路由器,事件等)

我有一個視圖。它有一個集合(該視圖顯示每天一個小時的事件類型的會話列表)。最初,當視圖首次創建時,我將顯示整個Sessions集合。沒關係。在視圖的頂部,我每週的每一天(在我們的活動期間)都有4個鏈接 - 第10,11,12,13。我希望用戶能夠點擊一天並篩選特定日期的會話列表(如我所說的,非常簡單)。

到目前爲止,我已經它的工作是這樣的:

  1. 的會話集(基類)有,做下面的方法稱爲filterByDay(天):

    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類的標籤適當地觸發事件,View中的filterByDay調用傳遞NEW過濾集合(來自模型的方法)的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()總是返回數組而不是集合的事實的理解。 (這就是爲什麼Im在Controller上面的Controller過濾器調用中聲明新的基本集合的原因)。

對不起,這是令人困惑或沒有意義,但希望有了這個數量的細節,有人可以看到我的一般邏輯與如何處理集合開始的一個超級明顯的漏洞。

再次感謝您的幫助!

+0

經過一些思考和調試,我改變了我的過程了一下。現在,在我的控制器中,我總是傳遞完整的會話數據 - 無論是來自showSessions還是showSessionsByDay--唯一的區別是我將「startday」選項傳遞給View。在我看來,我檢查開始日,如果它存在,我過濾視圖初始化的基本列表,並呈現將新列表傳遞給呈現調用。否則,我只是調用render()(它依賴於stock.collection列表)。對於這種解決方案,不一定「很高興」,因爲它有點像黑客... – jkat98

+0

我維護一個單獨的變量,讓我們說相同類型的「過濾」來顯示搜索結果或顯示主集合的子集。在我看來顯示收集結果的視圖中,我添加了邏輯以在使用原始集合或「過濾」之間切換以在頁面上呈現項目。如果現在工作,我會說讓它成爲,如果你有更好的想法,在一段時間後重新審視它。 – bvoleti

回答

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

對!謝謝你的迴應,幾乎和我想的一樣。我所做的一項工作是在集合filterByDay方法的返回中實現新的SessionsCollection權限。因此,爲我節省了額外的步驟(您在上面找到的),現在可以在主板上工作 - 基本上消除了filter()函數的toArray默認功能(專門用於該方法)。再次感謝! – jkat98

相關問題