Ember.js 余烬.js'；入门代码段为每个导航复制模板

我最近一直在学习有关Ember的知识，我一直在他们网站的“指南”部分中使用示例，我对以下代码片段有问题：

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;
  }
});

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.IndexRoute = 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

人

{{{#每个模型}
你好，{{fullName}}
{{/每个}}

当我导航到该网站时，它会按预期正确显示页面和名称。然后我导航到localhost:80/#，它复制了模板，因此所有内容都显示了两次。当我使用浏览器的箭头控件来回导航时，每次都会在页面底部追加/复制模板

---

我真的不明白它为什么会这样。想法？

当你到达一条路线时，模型钩子会被踢开，而这条路线是动态的，下面类似的东西更像是ember esk

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')
}).reopenClass({
  people: [],
  find: function() {
    this.people.clear(); //so find doesn't create duplicates each time
    var first = App.Person.create({ firstName: "Tom", lastName: "Dale" });
    var last = App.Person.create({ firstName: "Yehuda", lastName: "Katz" });
    this.people.pushObject(first);
    this.people.pushObject(last);
    return this.people;
  }
});

App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    return App.Person.find();
  }
});

---

此外，您通常不会使用基础应用程序模板/view/controller/route中的“模型”，因此创建一个简单的模型并让该路径执行find（）可能更有意义（以避免遇到重复问题）

在Ember.js上发布了另一条建议。归功于用户teddyzeenny

在应用程序路径中返回模型会导致重新渲染。最好使用IndexRoute而不是ApplicationRoute

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;
  }
});

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.IndexRoute = 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

{{outlet}}
人

{{{#每个模型}
你好，{{fullName}}
{{/每个}}

在他提出的拉动请求中进行了更多讨论：

在ApplicationRoute中返回模型可能会导致应用程序失败 在某些情况下要重新渲染的模板（）

应用程序模板不应重新呈现，因为它是附加的 到主体，因此在重新渲染时会导致重复模板

这个PR还添加了一个{{outlet}}，因为有些人正在使用它 作为一个起点，准备一个插座将使 他们更容易在示例的基础上构建

---

我把这个例子放到一个JSBin中，它似乎起了作用：我确实提到它起了作用。奇怪的行为是当我导航时。它可以在该jsbin中重新创建吗？我似乎无法在jsbin中导航。如果您删除

/edit

部分，您可以直接访问该页面：在emberjs.com上的相关讨论线程上发布了另一个解决方案，其中讨论了使用Application.IndexRoute。你对此有何看法？很难说-这不是在这里发布的：）我在这里发布了他的答案以供将来参考。我认为从你发布的回复来看，关于重新进入的观点是有效的，而且是好的，但我仍然认为值得一提的是，你从来没有使用过应用程序路径本身的“模型”（这可能是你一开始就感到痛苦的原因）. 相反，应用程序只是某种“起点”。从这里，我将创建一个直接处理模型的人员路由/控制器/视图/模板（让应用程序路由/视图不知道模型状态）