Ember nested template only rendering on link click, not on back button or full url

1

I have my resources nested as so:

Mdm.Router.map ->
  @resource "groups", ->
    @resource "group", path: ':group_id'

'/groups/ loads a list of all groups on the left side of the browser. Each group is linking to its specific group_id. When clicked, the ‘group’ template renders on the right side of the screen, showing details of one group while the list remains to the left.

However, when you click the back button, or manually enter the group_id into the url the individual groups dont render. The url will update in the browser window, but the content wont change to match it.

I have the singular ‘group’ template rendering inside of the ‘groups’ template with the {{outlet}}.

My groups_route.js.coffee looks like this:

Mdm.GroupsRoute = Ember.Route.extend(model: ->
   Mdm.Group.all()
)

application.hbs:

<div class="container">
  <div class="nav-bar">
    <img src="assets/logo_loginbox.png" class="logo">
    <ul class="nav-menu">
      <li>GROUPS</li>
      <li>USERS</li>
    </ul>
  </div><!-- nav-bar -->
  <hr>
  {{outlet}}
</div><!-- container -->

groups.hbs:

<h1>Groups</h1>

{{ partial groupsList }}
<div class="group">
  {{outlet}}
</div><!-- group -->

group.hbs:

<h1>{{name}}</h1>

I’m just not sure if there is something blatant I’m missing. It seems like I’m doing everything by the book.

Thank you!

EDIT

I’m getting the following error in the console when I use the back button or try to load the page with the group_id present:

Uncaught TypeError: Object function () { if (!wasApplied) { Class.proto(); // prepare prototype… } o_defineProperty(this, GUID_KEY, undefinedDescriptor); o_defineProperty(this, ‘_super’, undefinedDescriptor); var m = meta(this); m.proto = this; if (initMixins) { // capture locally so we can clear the closed over variable var mixins = initMixins; initMixins = null; this.reopen.apply(this, mixins); } if (initProperties) { // capture locally so we can clear the closed over variable var props = initProperties; initProperties = null;

  var concatenatedProperties = this.concatenatedProperties;

  for (var i = 0, l = props.length; i < l; i++) {
    var properties = props[i];

    Ember.assert("Ember.Object.create no longer supports mixing in other definitions, use createWithMixins instead.", !(properties instanceof Ember.Mixin));

    for (var keyName in properties) {
      if (!properties.hasOwnProperty(keyName)) { continue; }

      var value = properties[keyName],
          IS_BINDING = Ember.IS_BINDING;

      if (IS_BINDING.test(keyName)) {
        var bindings = m.bindings;
        if (!bindings) {
          bindings = m.bindings = {};
        } else if (!m.hasOwnProperty('bindings')) {
          bindings = m.bindings = o_create(m.bindings);
        }
        bindings[keyName] = value;
      }

      var desc = m.descs[keyName];

      Ember.assert("Ember.Object.create no longer supports defining computed properties.", !(value instanceof Ember.ComputedProperty));
      Ember.assert("Ember.Object.create no longer supports defining methods that call _super.", !(typeof value === 'function' && value.toString().indexOf('._super') !== -1));

      if (concatenatedProperties && indexOf(concatenatedProperties, keyName) >= 0) {
        var baseValue = this[keyName];

        if (baseValue) {
          if ('function' === typeof baseValue.concat) {
            value = baseValue.concat(value);
          } else {
            value = Ember.makeArray(baseValue).concat(value);
          }
        } else {
          value = Ember.makeArray(value);
        }
      }

      if (desc) {
        desc.set(this, keyName, value);
      } else {
        if (typeof this.setUnknownProperty === 'function' && !(keyName in this)) {
          this.setUnknownProperty(keyName, value);
        } else if (MANDATORY_SETTER) {
          Ember.defineProperty(this, keyName, null, value); // setup mandatory setter
        } else {
          this[keyName] = value;
        }
      }
    }
  }
}
finishPartial(this, m);
delete m.proto;
finishChains(this);
this.init.apply(this, arguments);
  } has no method 'find' application.js:51233
Mdm.GroupRoute.Ember.Route.extend.model application.js:51233
superWrapper application.js:12849
Ember.Route.Ember.Object.extend.deserialize application.js:36503
collectObjects application.js:35614
proceed application.js:35638
(anonymous function) application.js:1193
fire application.js:1038
self.fireWith application.js:1149
(anonymous function) application.js:1200
fire application.js:1038
self.fireWith application.js:1149
done application.js:8075
script.onload.script.onreadystatechange