javascript - 为什么此路线的模型仅在 3 个案例中的 2 个进行了更新？ - Ember.js 2.3

Question

我正在使用 Ember.js 2.3。我有一个父Route，如下所示:

App.AppRoute = Ember.Route.extend
  model: ->
    Ember.RSVP.hash
      projects: @store.findAll "project"
      clients: @store.findAll "client"
      consultants: @store.findAll "consultant"
      practiceAreas: @store.findAll("practice_area").then (practice_areas) ->
        practice_areas.sortBy "displayName"

我有一个子Route，看起来像:

App.AppProjectRoute = Ember.Route.extend
  model: (params) ->
    hash = @modelFor "app"
    hash["project"] = @store.findRecord "project", params.project_id
      .then (p) -> p
    hash["workWeeks"] = @store.query "work-week", project_id: params.project_id
      .then (weeks) -> weeks
    console.log _.keys hash
    Ember.RSVP.hash hash

子Route的模板包含:

  <hr/>
  {{add-consultant project=model.project consultants=model.consultants addConsultant="didAddConsultant"}}
</div>

然后 add-consultant 组件包含一个计算属性:

remainingConsultants: Ember.computed "project", "project.consultants.[]", "consultants.[]", ->
  already_involved = @get "project.consultants"
  remaining        = @get "consultants"

  already_involved.forEach (ai) ->
    remaining = remaining.reject (r) -> r.get("id") is ai.get("id")

  remaining.sortBy "displayName"

<小时/>

案例1

当我直接导航到项目(例如 http://localhost/#/app/project/27)时，Route 的 model 钩子(Hook)正确地向服务器查询数据并呈现模板和组件。

案例2

当我直接导航到项目时，然后手动更改 URL 中的项目 ID(例如从 http://localhost/#/app/project/27 更改为 http:///localhost/#/app/project/28 并按 Enter，Route model Hook 更新，模板和组件也随之更新已正确重新渲染。

案例3

但是 - 这是我的困惑 - 通过单击链接导航到项目(例如，使用 {#link-to} 帮助器从项目列表中导航) - 即使我第一次访问像案例 1 或案例 2 一样成功访问页面，然后立即导航回同一个项目，我收到错误:

TypeError: already_involved is undefined

深入观察，发现 @get "project" 本身是未定义的。

使用 {#link-to} 与导致此问题的“直接”导航有何不同？这是我在定义路线模型层次结构时犯的错误吗？我是否缺少某种事件 Hook ？

<小时/>

编辑1:如果有一种更智能或更惯用的方法来定义这些类型的分层模型 Hook ，也许可以避免这个问题？

编辑2:路由器:

this.route "app", ->
  this.route "projects"
  this.route "project", path: "/project/:project_id"

Answer 1

由 link-to 帮助器或 transitionTo/transitionToRoute 触发的转换有两种“模式”。转换可以触发模型 Hook (beforeModel、model、afterModel)，也可以不触发。

要跳过模型 Hook ，您可以将对象传递给转换，例如{{链接到“个人资料”用户}}。 Ember.js 将此解释为您已经拥有必要的信息，因此跳过了加载所述信息的钩子(Hook)。

要强制模型 Hook ，您可以将字符串或整数传递给转换，例如{{link-to "Profile"1}} 或 {{link-to "Profile"user.id}}。这将使用传递给转换的值来填充路由的动态段，Ember.js 将此解释为尚未加载所需的数据，从而触发 Hook 。

由于您的模型钩子(Hook)返回一个散列，因此强制钩子(Hook)以便所有内容正确加载是有利的。

您可以咨询documentation for the model hook欲了解更多信息。