Ember展開子控制器/查看

Question

如何構建此工作？

我有許多筆記的項目。 Notes使用itemController列出。我需要這些註釋以獲得可以通過路線切換的展開視圖（它是項目內部註釋的顯示視圖）。如何獲取路線以切換頁面上列出的特定筆記以進行展開？

Answer 1

您可以使用官方Ember指南尋求幫助：http://emberjs.com/guides/。這個例子有一個很簡單的應用程序（在你的案例項目中），每個帖子都有很多評論（在你的案例中）。唯一缺少的是切換筆記的選項，而不是永久打開它。

使用指南而已，你的路由器應該是這個樣子：

App.Router.map(function() { 
    this.resource('project', { 
     path: '/project/:project_id' 
    }, function() { 
     this.resource('note', { path: '/note/:note_id' }, function() {}); 
    }); 
}); 


App.ProjectController = Ember.ObjectController.extend({ 
    toggle: function(note) { 
     var isOpen = !note.get('isOpen'); 
     if (isOpen) { 
      this.transitionTo('note', note); 
     } else { 
      this.transitionTo('project', this.get('content')); 
     } 

     this.get('notes').forEach(function(note) { 
      note.set('isOpen', false); 
     }); 

     note.set('isOpen', isOpen); 
    } 
}); 

然後，你的項目模板應列出所有的筆記，並提供一個地方開一個說明，並查看：

<script type="text/x-handlebars" data-template-name="project"> 
    {{#each note in notes}} 
     <li> 
     <button type="button" {{action toggle note}}> 
      {{note.name}} 
     </button> 
     </li> 
    {{/each}} 

    {{outlet}} 
</script> 

<script type="text/x-handlebars" data-template-name="note"> 
    {{description}} 
</script> 

澄清事情：ProjectController是一個ObjectController，其內容設置爲當前打開的項目。 ProjectController＃notes是當前加載的項目的所有註釋所在的位置。 項目/ note.handlebars將簡單描述註釋，因爲您希望它在項目頁面內顯示。

這裏是（添加了一些樣板代碼）工作小提琴：http://jsfiddle.net/ZcspT/6/

編輯：

這裏是沒有航線的版本（僅適用於不同的部位）：

App.Router.map(function() { 
    this.resource('project', { 
     path: '/project/:project_id' 
    }); 
}); 

App.NoteView = Ember.View.extend({ 
    templateName: 'note', 
    content: null, 
    classNameBindings: ['content.isOpen::hidden'] 
}); 


App.ProjectController = Ember.ObjectController.extend({ 
    toggle: function(note) { 
     var isOpen = !note.get('isOpen'); 
     this.get('notes').forEach(function(note) { 
      note.set('isOpen', false); 
     }); 

     note.set('isOpen', isOpen); 
    } 
}); 

模板：

<script type="text/x-handlebars" data-template-name="project"> 
    {{#each note in notes}} 
     <li> 
     <a {{action toggle note}} href="#">{{note.name}}</a>  
     </li> 
    {{/each}} 

    <div id="noteSection"> 
     {{#each note in notes}} 
     {{view App.NoteView contentBinding="note"}} 
     {{/each}} 
    </div> 
</script> 

樣式表：

.hidden { 
    display: none; 
} 

例子：http://jsfiddle.net/ZfWhc/1/