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> 

Я не уверен в этом решении, потому что это делает разработчик, ответственный за управление, когда оказывать или не определенный шаблон или представление; в зависимости от сложности было бы легче совершить ошибку и оставить в то время более одного представления, или даже отобразить неправильный вид, но это то, что я получил в данный момент.