在Ember.js中執行嵌套分組

Question

我需要在我的模型上執行嵌套分組才能顯示它。

下面是所需的輸出我需要：

---- Today ---- 
    -- Thread 1 
    - Activity 1 
    - Activity 2 
    -- Thread 2 
    -- Activity 1 

---- Yesterday ---- 
    -- Thread 1 
    - Activity 1 
    - Activity 2 
    -- Thread 2 
    - Activity 1 

我無法找出一個最佳的方式來實現這一目標。我需要幫助開發一個適當的控制器和視圖/模板。

這是我最低限度的應用程序設置fixtures，以便您對我的模型有更多的瞭解。

(function($, Ember) { 
    'use strict'; 

    var App = Ember.Application.create({ 
     rootElement: '#app-container' 
    }); 

    App.Store = DS.Store.extend({ 
     revision: 13, 
     adapter: DS.FixtureAdapter 
    }); 

    App.Thread = DS.Model.extend({ 
     title: DS.attr('string'), 
     url: DS.attr('string'), 
     kind: DS.attr('string'), 
     lastActivityOn: DS.attr('date'), 
     activities: DS.hasMany('activity') 
    }); 

    App.Activity = DS.Model.extend({ 
     kind: DS.attr('string'), 
     date: DS.attr('date'), 
     performer: DS.belongdTo('user'), 
     thread: DS.belongsTo('thread') 
    }); 

    App.User = DS.Model.extend({ 
     userName: DS.attr('string'), 
     displayName: DS.attr('string'), 
     profilePicUrl: DS.attr('string'), 
     activities: DS.hasMany('activity') 
    }); 

    App.Thread.FIXTURES = [ 
     { 
      id: '958173B3-EA1C-4E06-873A-038097A65E2F', 
      title: 'SE01', 
      url: '/sites/moon551/se01', 
      kind: 'Workspace', 
      lastActivityOn: '2014-03-01 10:46:31.4000000' 
     }, 
     { 
      id: '9B45E3F0-13FD-48BE-83ED-F3C096C3BCC2', 
      title: 'To Do', 
      url: '/sites/moon551/se02/lists/todo', 
      kind: 'List', 
      lastActivityOn: '2014-02-28 11:46:31.4000000' 
     }, 
     { 
      id: '6E6E4EE4-5568-49B3-B9E2-66CD60BA6CAC', 
      title: 'Design UX', 
      url: '/sites/moon551/se03/lists/todo/1', 
      kind: 'ListItem', 
      lastActivityOn: '2014-02-27 12:46:31.4000000' 
     } 
    ]; 

    App.Activity.FIXTURES = [ 
     { 
      id: '37D7CBCD-0299-4203-8BF0-1B2DB676467F', 
      kind: 'Created', 
      date: '2014-03-01 10:30:31.4000000', 
      performer: 1073741823, 
      thread: '958173B3-EA1C-4E06-873A-038097A65E2F' 
     }, 
     { 
      id: 'C378CD09-388C-403C-8558-3A1D6B5DCD97', 
      kind: 'Updated', 
      date: '2014-03-01 10:46:31.4000000', 
      performer: 1073741823, 
      thread: '958173B3-EA1C-4E06-873A-038097A65E2F' 
     }, 
     { 
      id: 'C6B68036-7543-466F-85AF-141DB4874F75', 
      kind: 'Created', 
      date: '2014-02-28 11:30:31.4000000', 
      performer: 1073741823, 
      thread: '9B45E3F0-13FD-48BE-83ED-F3C096C3BCC2' 
     }, 
     { 
      id: 'C378CD09-388C-403C-8558-3A1D6B5DCD97', 
      kind: 'Updated', 
      date: '2014-02-28 11:46:31.4000000', 
      performer: 1073741823, 
      thread: '9B45E3F0-13FD-48BE-83ED-F3C096C3BCC2' 
     }, 
     { 
      id: 'C064010D-2603-4E28-9DE5-568212F1EFCA', 
      kind: 'Created', 
      date: '2014-02-27 12:30:31.4000000', 
      performer: 1073741823, 
      thread: '6E6E4EE4-5568-49B3-B9E2-66CD60BA6CAC' 
     }, 
     { 
      id: '3C449D67-F231-4DB1-8D4D-AE0C39DB4E5D', 
      kind: 'Updated', 
      date: '2014-02-27 12:46:31.4000000', 
      performer: 1073741823, 
      thread: '6E6E4EE4-5568-49B3-B9E2-66CD60BA6CAC' 
     } 
    ]; 

    App.User.FIXTURES = [ 
     { 
      id: 1073741823, 
      userName: 'Administrator', 
      displayName: 'System Account' 
     } 
    ]; 

    App.IndexController = Ember.ArrayController.extend(); 

    App.IndexRoute = Ember.Route.extend({ 
     model: function() { 
      return this.store.find('activity'); 
     } 
    }); 
})(jQuery, Ember); 

下面是一個實際的實物模型：

Answer 1

我是emberjs小白所以採取這個答案是什麼。我遇到類似的情況，需要按日期（年，月，日）對帖子進行分組。我用moment.js來提取日子。這是我如何做到的。 我是從這個樣子服務器獲取數據：

 

    { 
     "idea": [{ 
      "_id": "548c7362b9b39b8305000001", 
      "newTitle": null, 
      "body": "test", 
      "date": "2014-12-13T17:12:02.415Z" 
     }, { 
      "_id": "548c785c94e310a905000001", 
      "newTitle": null, 
      "body": "this is my awesome idea\n", 
      "date": "2014-12-13T17:33:16.316Z" 
     }, { 
      "_id": "548c786e94e310a905000002", 
      "newTitle": null, 
      "body": "this is my awesome \n\nanother awesome idea\n", 
      "date": "2014-12-13T17:33:34.214Z" 
     }, { 
      "_id": "548cafb494e310a905000003", 
      "newTitle": null, 
      "body": "mii\n", 
      "date": "2014-12-13T21:29:24.934Z" 
     }] 
    } 

我Emberjs路線看起來像這樣

 

    saveIdea.IdeasRoute = Ember.Route.extend({ 
     model: function() { 
     return this.store.find('idea',{page:1,skip:1}); 
     } 
    }); 

而且我Emberjs控制器如下。我正在使用moment.js來提取和格式化我的日期的年，月和日。

 

    saveIdea.IdeasController = Ember.ArrayController.extend({ 
     test : Ember.computed('content', function() { 
     var results = {} 
     var result = []; 
     this.get('content').forEach(function(item){ 
      var date = item.get('date'); 
      var month = moment(date).format('MMMM'); 
      var year = moment(date).format('YYYY'); 
      var day = moment(date).format('DD'); 
      var dayOfWeek = moment(date).format('dddd'); 
      var time = moment(date).format('LT'); 
      var body = item.get('body'); 
    var groupYear = result.findBy('year',year); 
    if(!groupYear) 
    { 
      result.pushObject(Ember.Object.create({ 
       year: year, 
       months: [] 
      })); 
     } 
     var groupMonths = result.findBy('year',year).months.findBy('month',month); 
     if(!groupMonths) 
     { 
      result.findBy('year',year).months.pushObject(Ember.Object.create({ 
       month: month, 
       days: [] 
      })); 
     } 
     var groupDays = result.findBy('year',year).months.findBy('month',month).days.findBy('day',day); 
     if(!groupDays) 
     { 
      result.findBy('year',year).months.findBy('month',month).days.pushObject(Ember.Object.create({ 
       day: day, 
       ideas: [] 
      })); 
     } 
     result.findBy('year',year).months.findBy('month',month).days.findBy('day',day).ideas.pushObject(Ember.Object.create({ 
       idea: body, 
       time: time, 
       dayOfWeek :dayOfWeek 
      })); 

     }); 
     return result 
     }) 
    }); 

然後在我看來，我只是通過計算測試變量的內容。 我不確定這種方法的效率如何，但它對我來說工作得很好。您可以使用此方法執行嵌套分組。