Ember Latest

The latest build of Ember.

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<script src="http://builds.erikbryn.com/ember-model/ember-model-latest.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.8.1/ember.min.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>Deeply nested routes using link-to handlebars helper</h1>
    <h2>(Note: Ember updated to 1.8.1)</h2>
    {{#link-to 'dimensions'}}Show Dimensions{{/link-to}}
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
    <hr />
</script>

<script type="text/x-handlebars" data-template-name="dimensions">
<div class="col-lg-3">
<h2>Dimensions</h2>
  <ul>
    
      {{#each model }}
      {{#link-to 'dimension' id }}
      <li> {{name}}</li>
      {{/link-to}}
    {{/each}}
  </ul>
    <hr />
{{outlet}}
</div>
</script>

<script type="text/x-handlebars" data-template-name="dimension">
<div class="col-lg-3">
<h2>Sub-Dimensions</h2>
  <ul>
      {{#each model }}
      {{#link-to 'value' id }}
      <li> {{name}}</li>
      {{/link-to}}
    {{/each}}
  </ul>
    <hr />
{{outlet}}
</div>
</script>


<script type="text/x-handlebars" data-template-name="value">
<div class="col-lg-3">
<h2>Value</h2>
  {{text}}
    <hr />
{{outlet}}
</div>
</script>

CSS

h1 { font-size: 1.6em; padding-bottom: 10px; }
h2 { font-size: 1.4em; }
ul { padding: 15px; font-size: 1.4em; color: green; }

JavaScript

App = Ember.Application.create({
  LOG_TRANSITIONS: true, // basic logging of successful transitions
  LOG_TRANSITIONS_INTERNAL: false, // detailed logging of all routing steps
  LOG_STACKTRACE_ON_DEPRECATION: true,
  LOG_BINDINGS: true,
  LOG_VIEW_LOOKUPS: true,
  LOG_ACTIVE_GENERATION: true
});

App.Router.map(function () {
  this.resource('dimensions', function() {
    this.resource('dimension', { path: ':dimension_id'}, function () {
        this.resource('values', function() {
          this.resource('value', { path: ':value_id' });        
        });
    });
  });
});

App.IndexRoute = Ember.Route.extend({
  model: function(){
      return [{}];
  }
});

App.DimensionsRoute = Ember.Route.extend({
  model: function (params) {
    return [
          {id: '0', name: 'set dimension_id to 0'},
          {id: '1', name: 'set dimension_id to 1'},
          {id: '2', name: 'set dimension_id to 2'}
      ];
  },
  setupController: function (controller, model) {
    controller.set('model', model);
  }
});

App.DimensionRoute = Ember.Route.extend({
  model: function (params) {
    return [
          {id: '3', name: 'dimension_id = ' + params.dimension_id + '. set value_id to 3'},
          {id: '4', name: 'dimension_id = ' + params.dimension_id + '. set value_id to 4'},
          {id: '5', name: 'dimension_id = ' + params.dimension_id + '. set value_id to 5'}
      ];
  },
  setupController: function (controller, model) {
    controller.set('model', model);
  }
});

App.ValueRoute = Ember.Route.extend({
  model: function (params, transition) {
      debugger;
    var dimension_id = this.paramsFor('dimension').dimension_id;
      return {
          text: 'value_id = ' + params.value_id + ', dimension_id = ' + dimension_id
      };
  },
  setupController: function (controller, model) {
    controller.set('model', model);
  }
});