title: When switching from dynamic segments route to other route, application outlet is overwritten
body: <p>When any route (except windowsProdver) is loaded first, I can transition between all other routes without any problem. When windowsProdver is called directly by URL and then another route is called through linkTo or transitionToRoute, I just get a blank page with the error <code>Uncaught TypeError: Cannot read property 'parentNode' of null</code> in <code>ember.js:23544</code> in the javascript console of the browser.</p>
  
  <p>As far as I could see so far is, that on calling windowsProdver route directly via URL and switching to another route (with transitionToRoute or linkTo), the application template is overwritten or destroyed so the new template cannot be inserted into the application template / DOM.</p>
  
  <ul>
  <li>windowsIndex should show general stats with a list of product versions ('prodver')</li>
  <li>windowsProdver should show specific stats for the prodver chosen in windowsIndex or by direct call by URL</li>
  </ul>
  
  <p>Those are the routes I have specified:</p>
  
  <pre><code>App.Router.map(function() {
      this.resource('serverversions', {path: '/serverversions'});
  
      this.resource('windowsIndex', {path: '/stats/windows'});
      this.resource('windowsProdver', {path: '/stats/windows/:prodver'});
  
      this.resource("users", {path: "users"}, function() {
          this.resource("users.user", {path: ":sernum"});
      });
  });
  </code></pre>
  
  <p>The result is:</p>
  
  <p><img src="https://i.stack.imgur.com/gTVRq.png" alt="Screenshot of the routes created"></p>
  
  <p>The routes:</p>
  
  <pre><code>App.WindowsIndexRoute = Ember.Route.extend({
      model: function() {
          return App.StatsWindowsGeneral.get();
      }
  });
  
  
  App.WindowsProdverRoute = Ember.Route.extend({
      prodver: null,
      model: function(params) {
          if(params &amp;&amp; params.prodver) {
              App.StatsWindowsGeneral.get();
              this.prodver = params.prodver;
              return $.getJSON(App.Config.api.url + "/stats/windows/" +    this.prodver).then(function(response) {
                  // &lt;some logic here&gt;
                  return response;
              });
          }
      }
  });
  </code></pre>
  
  <p>application template:</p>
  
  <pre><code>{{view App.HeaderView}}
  
  &lt;div class="container"&gt;
      {{outlet}}
  &lt;/div&gt;
  </code></pre>
  
  <p>The templates are loaded like this:</p>
  
  <pre><code>var loaderObj = {
      templates: [
          'application.hbs',
          'loading.hbs',
          'header.hbs',
          'index.hbs',
          'serverversions.hbs',
          'serverversionsserver.hbs',
          'stats-index.hbs',
          'windowsIndex.hbs',
          'windowsProdver.hbs',
          'users.hbs',
          'user.hbs'
      ]
  };
  load_templates(loaderObj.templates);
  
  function load_templates(templates) {
      $(templates).each(function() {
          var tempObj = $('&lt;script&gt;');
          tempObj.attr('type', 'text/x-handlebars');
          var dataTemplateName = this.substring(0, this.lastIndexOf('.'));
          dataTemplateName = dataTemplateName.replace(/\-/g, '/');
          console.log(dataTemplateName);
          tempObj.attr('data-template-name', dataTemplateName);
          $.ajax({
              async: false,
              type: 'GET',
              url: 'assets/templates/' + this,
              success: function(resp) {
                  tempObj.html(resp);
                  $('body').append(tempObj);
              }
          });
      });
  }
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>I first did the routing in the following way:</p>
  
  <pre><code>App.Router.map(function() {
      this.resource('serverversions', {path: '/serverversions'});
      this.resource('stats', {path: '/stats'}, function() {
          this.route('windows');
          this.route('windowsProdver', {path: '/windows/:prodver'});
      });
  
      this.resource("users", {path: "users"}, function() {
          this.resource("users.user", {path: ":sernum"});
      });
  });
  </code></pre>
  
  <p>but after reading the article on <a href="http://hashrocket.com/blog/posts/ember-routing-the-when-and-why-of-nesting" rel="nofollow noreferrer">http://hashrocket.com/blog/posts/ember-routing-the-when-and-why-of-nesting</a>, I switched to the routing shown in the code at the top.</p>