ember.js - Ember.js の入門スニペットは、ナビゲーションごとにテンプレートを複製します

Question

私は最近 Ember について学んでおり、彼らの Web サイトのガイド セクションにある例をいじっていますが、次のスニペットで問題が発生しています。

1) Javascript

App = Ember.Application.create();

App.Person = Ember.Object.extend({
  firstName: null,
  lastName: null,

  fullName: function() {
    return this.get('firstName') +
           " " + this.get('lastName');
  }.property('firstName', 'lastName')
});

App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    var people = [
      App.Person.create({
        firstName: "Tom",
        lastName: "Dale"
      }),
      App.Person.create({
        firstName: "Yehuda",
        lastName: "Katz"
      })
    ];
    return people;
  }
});

2) HTML

<script type="text/x-handlebars">
  <h1>People</h1>

  <ul>
  {{#each model}}
    <li>Hello, <b>{{fullName}}</b>!</li>
  {{/each}}
  </ul>
</script>

Web サイトに移動すると、期待どおりにページと名前が正しく表示されます。次に、localhost:80/# に移動すると、テンプレートが複製され、すべてが 2 回表示されます。ブラウザーの矢印コントロールを使用して前後に移動すると、テンプレートが毎回ページの下部に追加/コピーされます。

なぜそれがそうするのか、正直なところ理解できません。アイデア？