javascript - 模板仅在刷新页面后呈现

Question

我想要大学列表，点击其中一所大学后，该列表旁边应该显示专业列表。单击其中一个专业后，这两个列表旁边会显示科目列表。不过我想我在路由中做错了一些事情。单击其中一所大学的 URL 会发生变化，但专业列表不会显示。但刷新页面(使用此网址)后，它工作得很好。这是代码: http://jsbin.com/AQAref/1/edit

Answer 1

就像其他人说的，你的 jsbin 不起作用。很明显，真正的问题在于您的链接。如果它在刷新时有效，但在单击链接时无效，那么区别在于模型的来源。当您刷新时，模型来自模型 Hook 。当您使用链接导航时，模型由链接到语句提供。

在您的情况下，如果刷新页面，您将从大学模型 Hook 中获取特定大学的专业。如果您从页面点击大学，大学模型将发送到大学资源，而不是该大学的专业。

所以要么这需要说专业

{{#each}}
   <li {{bindAttr id="id"}}>
     <div class="list-element-title">
        {{#link-to 'university' this.majors}}{{name}}{{/link-to}}
     </div>
   </li>
{{/each}}

而不是

{{#each}}
   <li {{bindAttr id="id"}}>
     <div class="list-element-title">
        {{#link-to 'university' this}}{{name}}{{/link-to}}
     </div>
   </li>
{{/each}}

或者你的路线需要返回大学，但我猜路线模型 Hook 是正确的，因为你说它在刷新时有效。

 App.UniversityRoute = Ember.Route.extend({
  model: function(params) {
    var majors = universities.findBy('id', params.univ_id).majors;
    return majors;
  }
 });

我没有查看您的其余代码，但请确保您通过链接发送的模型与通过模型 Hook 获取模型时获得的模型相同。