Ember Child View Demo

https://github.com/emberjs/ember.js/pull/3182

by genkilabs

HTML

<script src="http://ember.alexspeller.com/handlebars-1.0.0.js"></script>
<script src="http://ember.alexspeller.com/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>Title Header</h1>
    <p>Demonstrates problem with rendering child template into the application and then navigating back to the parent. Problem is the parent no longer displays.</p>
    <br />
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
    <h1>Index page</h1>
    <p>Pick one</p>
    <ul>
        {{#each model}}
            <li>
                {{#linkTo 'show' this}}
                    {{firstName}} {{lastName}}
                {{/linkTo}}
            </li>
        {{/each}}
    </ul>
</script>

<script type="text/x-handlebars" data-template-name="show">
    <h1>Detail page</h1>
    <h2>{{this.firstName}} is rad</h2>
    <br />
    <nav>Navigate back to index to break -> {{#linkTo 'index'}}Index{{/linkTo}}</nav>
</script>

CSS

h1 {
    font-size: 1.6em;
    padding-bottom: 10px;
}
h2 {
    font-size: 1.4em;
}
ul {
    padding: 15px;
    font-size: 1.4em;
    color: green;
}
a {
    color: blue;
}
a.active {
    color: red;
    text-decoration: none;
}
.url {
    font-family: sans-serif;
    padding: 0.5em;
    border: 1px inset #ccc;
    margin-bottom: 1em;
}

CoffeeScript

window.App = Ember.Application.create
  LOG_TRANSITIONS: true
  LOG_TRANSITIONS_INTERNAL: true

App.Router.map ->
  @resource 'index', path: '/', ()->
    @resource 'show', path: ':person_id'

App.IndexRoute = Em.Route.extend
  model: ->
    [{id: 1, firstName: 'Kris', lastName: 'Selden', twitter: 'krisselden'},
    {id: 2, firstName: 'Luke', lastName: 'Melia', twitter: 'lukemelia'},
    {id: 3, firstName: 'Formerly Alex', lastName: 'Matchneer', twitter: 'machty'},
    {id: 4, firstName: 'Alex', lastName: 'Speller', twitter: 'alexspeller'}]

App.ShowRoute = Em.Route.extend
  renderTemplate: (controller, model)->
    this.render('show', {
      into: 'application'
    });