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/