Ember JS Nested Routing & Outlets Pattern (Bolos)

Código-fonte para exemplo

Ligação

O que aprender aqui?

Ember gera um controlador e uma visão para um recurso que pode ser usado com um roteador personalizado (que nos dá uma maneira de alimentar dados para um modelo)

Que tipo de problema estou tentando resolver?

Tenho uma padaria e quero listar minhas guloseimas.

O Ember tem um corpo docente para gerar controladores e visualizações com base em um recurso e uma rota (uma fonte de dados).

Esta é a configuração básica que o ember espera para usar este padrão.

No meu exemplo – quero visitar o caminho ‘/ # / bakery’ para levar o usuário à minha padaria, que está cheia de guloseimas!

Modelo de aplicativo (precisa de uma saída)

<script type="text/x-handlebars" id='application'>
   <h2>Welcome to Shop Land</h2>

   {{outlet}}
 </script>

Modelo de padaria (precisa de um outlet)

  <script type="text/x-handlebars" id="bakery">
At {{#link-to 'goodies' name}}"{{name}}" {{/link-to}}
    <br/>
    <!-- outlet is where goodies will appear (render) -->
    {{outlet}}
  </script>

Modelo de guloseimas (renderiza em um outlet)

<script type="text/x-handlebars" id="goodies">
  You see the following goodies:
  <ul>
  {{#each item in model}}
    <li>{{item.name}}</li>
  {{/each}}
  </ul>
</script>

Configure um aplicativo Ember básico

App = Ember.Application.create();

Crie um roteador com o recurso ‘padaria’ no caminho “# / padaria”

Crie um recurso em padaria no caminho # / bakery /: bakery_id

App.Router.map(function() {
  this.resource('bakery', {path:'/bakery'}, function() {
    this.resource('goodies',{path:':bakery_id'})
  })
});

Crie a rota para o recurso (modelo) da padaria
e projete a rota para a transição para o caminho das guloseimas

App.BakeryRoute = Ember.Route.extend({
  model: function() {
    return {name:'Yummy Land'};
  },
  afterModel: function() {
    this.transitionTo('goodies',this.model().name);
  }
});

Crie uma rota para o recurso Goodies (modelo)

App.GoodiesRoute = Ember.Route.extend({
  model: function() {
    return [{name:'Eclair'},{name:'Donut'},{name:'Oatmeal Cookie'}];
  }
});

Essa coleção de código acaba rasgando uma página no url “# / bakery / Yummy Land”
que se parece com isso.

Welcome to Shop Land

At "Yummy Land" 
You see the following goodies:
* Eclair
* Donut
* Oatmeal Cookie