ember.js - なぜこのように表示されるのですか?

Question

次のテンプレートがあります。

  <script type="text/x-handlebars" data-template-name="projects">
    <div class="container-fluid">
      <div class="row-fluid">
        {{#linkTo "projects"}}Root{{/linkTo}}
        {{#each controller}}
          <div class="span4">
            {{#linkTo "projects.show" this}}{{this.name}}{{/linkTo}}
          </div>
        {{/each}}
      </div>
      {{outlet}}
    </div>
  </script>

と：

  <script type="text/x-handlebars" data-template-name="projects/show">
    <h2>Overview of {{name}}</h2>
  </script>

app.js の次のコンテンツ:

App = Ember.Application.create({
  LOG_TRANSITIONS: true
});

App.Project = DS.Model.extend({
  name: DS.attr("string"),
  key : DS.attr("string")
});

App.Router.map(function() {
  this.resource("projects",function() {
    this.route("show", {path: "/:project_id"});
  });
});

App.IndexRoute = Ember.Route.extend({
  redirect: function() {
    this.transitionTo("projects");
  }
});

App.ProjectsRoute = Ember.Route.extend({
  model: function() {
    return this.store.find("project");
  },
})

および次のモデル設定:

App.Store = DS.Store.extend({
  adapter: DS.FixtureAdapter // run with fixture data
});

App.Project.FIXTURES = [
  {
    id: 1,
    name: 'Proj1',
    key: "P1KEY"
  },
  {
    id: 2,
    name: 'Proj2',
    key: "P2KEY"
  },
];

最初にページに移動すると、次の 3 つのリンク (ルート、Proj1、および Proj2) が表示されます。最初はインデックス ビューにいるので、次のように表示されます。

次に、最初のプロジェクトをクリックすると、次のように表示されます。

そして、最後にインデックスに戻りますが、プロジェクト/ショーの内容はまだそこにあるようです:

誰が何が起こっているのか説明できますか?