Ember Latest

The latest build of Ember.

by vsiguero

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.3.2/ember.min.js"></script>
<script src="http://builds.erikbryn.com/ember-model/ember-model-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>Deeply nested routes using link-to handlebars helper</h1>
    {{#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' controller.dimensionId 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>Sub-Dimensions</h2>
    <h3>Why nested router does not carry dimension_id value in params????</h3>
  <ul>
      {{#each model }}
      <li> {{name}}</li>
    {{/each}}
  </ul>
    <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: '10', name: 'Dimension10'},
          {id: '11', name: 'Dimension11'},
          {id: '12', name: 'Dimension12'}
      ];
  },
  setupController: function (controller, model) {
    controller.set('model', model);
  }
});

App.DimensionRoute = Ember.Route.extend({
  dimensionId: '',
  model: function (params) {
    // You only get "params" variable only in model's property of Ember.Route object
    this.dimensionId = params.dimension_id;
      
    return [
          {id: '110' + params.dimension_id, name: 'SubDimension110_' + params.dimension_id},
          {id: '111' + params.dimension_id, name: 'SubDimension111_' + params.dimension_id},
          {id: '112' + params.dimension_id, name: 'SubDimension112_' + params.dimension_id}
      ];
  },
  setupController: function (controller, model) {
    controller.set('model', model);
    // Now you can get params variable here
    controller.set('dimensionId', this.dimensionId);
  }
});

App.ValueRoute = Ember.Route.extend({
  model: function (params) {
    return [
          {id: '1110'+ params.value_id, name: 'Value1110_valueid_' + params.value_id},
          {id: '1111'+ params.value_id, name: 'Value1111_valueid_' + params.value_id},
          {id: '1112'+...