ember.js：我只能在路由中渲染吗？

Question

我需要一些关于ember.js的“概念”建议。

我想我理解事情如何处理直接发生的情况，当URL更改（手动或使用transitionTo）。该路线负责加载相应的模型并将模板呈现给父母的出口。

我不明白的是：有些情况下你想改变应用程序的状态，但你不想（或不能）改变URL。

比方说，我有两个出口一个模板：

<div id='dashboard'> 
    <div id='top'>{{outlet top}}</div> 
    <div id='bottom'>{{outlet bottom}}</div> 
</div> 

top和仪表板的bottom部分是相互独立的。最初，应用程序可能转换为/dashboard路由，该路由将top和bottom的初始状态呈现到插座中。但是那会发生什么？如果我想更改top插座的内容，我在哪里渲染并插入该内容（因为没有涉及路线）？我可以在控制器中渲染吗？我是否必须设置一个自定义视图容器以及如何以及将在何处呈现？

任何提示，将不胜感激。

Answer 1

不能确定这是否是去了解它的最佳方式，但我玩了，得到它的工作是这样的：

Full Source | Run

的JavaScript：

App.DashboardView = Em.View.extend({ 
    starActive: true, 
    userActive: false, 
    heartActive: false, 
    resetDisplay: function() { 
     this.set('starActive', false); 
     this.set('userActive', false); 
     this.set('heartActive', false); 
    }, 
    star: function() { 
     console.log('star'); 
     this.resetDisplay(); 
     this.set('starActive', true); 
    }, 
    user: function() { 
     console.log('user'); 
     this.resetDisplay(); 
     this.set('userActive', true); 
    }, 
    heart: function() { 
     console.log('heart'); 
     this.resetDisplay(); 
     this.set('heartActive', true); 
    } 
}); 

把手：

<script type="text/x-handlebars" data-template-name="_navDashboard"> 
    <ul class="nav-list"> 
     <li class="nav-header">Actions</li> 
     <li> 
      <a {{action star target="view"}}><i class="icon-star"></i> One</a> 
     </li> 

     <li> 
      <a {{action user target="view"}}><i class="icon-user"></i> Two</a> 
     </li> 
     <li> 
      <a {{action heart target="view"}}><i class="icon-heart"></i> Three</a> 
     </li> 
    </ul> 
</script> 

<script type="text/x-handlebars" data-template-name="dashboard/user"> 
    <h3>User</h3> 
</script> 

<script type="text/x-handlebars" data-template-name="dashboard/star"> 
    <h3>Star</h3> 
</script> 

<script type="text/x-handlebars" data-template-name="dashboard/heart"> 
    <h3>Heart</h3> 
</script> 

<script type="text/x-handlebars" data-template-name="dashboard"> 
    <div class="row-fluid"> 
     <h2>Dashboard</h2> 
    </div> 
    <div class="row-fluid"> 
     <div class="span3"> 
      <div class="well sidebar-nav"> 
       {{partial navDashboard}} 
      </div> 
     </div> 
     <div class="span7"> 
      {{#if view.starActive}} 
       {{render "dashboard/star"}} 
      {{/if}} 
      {{#if view.userActive}} 
       {{render "dashboard/user"}} 
      {{/if}} 
      {{#if view.heartActive}} 
       {{render "dashboard/heart"}} 
      {{/if}} 
     </div> 
    </div> 
</script> 

我不知道这个解决方案，因为它使负责管理时呈现不特定的开发者模板或视图;这取决于复杂性，因此更容易犯错，并在当时留下多个视图显示，甚至显示错误的视图，但这正是我目前所掌握的。