samedi 30 janvier 2016

Why is this Route's model updated in only 2 of 3 cases? - Ember.js 2.3

I'm using Ember.js 2.3. I have a parent Route that looks like this:

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"

I have a child Route looking like:

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

The template for the child Route contains:

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

Then the add-consultant component contains a computed property:

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"


Case 1

When I navigate directly to a project, such as http://localhost/#/app/project/27, the Routes model hook correctly queries the server for data and renders the template and components.

Case 2

When I navigate directly to a project, then manually change the project ID in the URL (say from http://localhost/#/app/project/27 to http://localhost/#/app/project/28 and press Enter, the Route model hooks update, and the template and components are correctly rerendered.

Case 3

However - and this is my confusion - navigating to a project by clicking a link (say, from a list of Projects using the {#link-to} helper) - even if I first visit the page sucessfully as in Case 1 or Case 2 and then immediately navigate back to the same Project, I get an error:

TypeError: already_involved is undefined

Looking deeper, it turns out that @get "project" itself is undefined.

What is different about using {#link-to} over "direct" navigation that causes this? Is it an error I made in defining my Route model heirarchy? Am I missing some kind of event hook?




Aucun commentaire:

Enregistrer un commentaire