如何从Ember控制器访问查询参数

Question

I am working on a habit tracking app . I start off with a list of habits. When a user clicks a habit, it creates a new event for that habit. I have the list working, but I am having difficulty with the creation of the new event.

To create a new event, I have this route:

App.Router.map( function() {
  ⋮
  this.resource( 'new_event', { path: '/event/new/:habit_id' } )
} )

Then the associated router is:

App.NewEventRoute = Ember.Route.extend( {
  model: function(params) {
    return this.store.find( 'habit', params.habit_id )
  },
  setupController: function( controller, model ) {
    controller.set( 'selectedHabit', model )
  }
} )

To the best of my knowledge, the only place I can access the query params is within the model function.

The controller, then, is:

App.NewEventController = Ember.ObjectController.extend( {
  init: function() {
    console.log( 'init', this.get( 'selectedHabit' ) )
    // Logic for adding a new event for the habit
    this.transitionToRoute( 'events' )
  },
  selectedHabit: null,
  ⋮

The returned value for selectedHabit is null .

Answer 1

This actually makes sense, since when calling setupController the controller is being passed as a parameter thus has already been initialized (eg http://emberjs.jsbin.com/cuwadafu/1/edit ). This means that the init function has already been called and the selectedHabit property has not been set yet.

One solution could be to create a generic function for creating the event ( this could also be called from other places as well ) with all the logic, that observes the selectedHabit property.

App.NewEventController = Ember.ObjectController.extend( {
/*passing an optional parameter of habitId, to make this generic, could be an option*/
  addNewEvent:function(/*habitId*/){
  // Logic for adding a new event for the habit
    this.transitionToRoute( 'events' )
  }.observes("selectedHabit"),
  .
  .
});

Answer 2

This was answered on the Ember discussion board . Instead of using a route, I ended up going with an action:

<script type="text/x-handlebars" id="habits">
  <div id="habits">
    {{#each}}
      <div class="row" {{action 'createEvent' id}}>
        <div class="col-xs-1 color" {{bind-attr style=style}}></div>
        <div class="col-xs-8">{{name}}</div>
        <div class="col-xs-3" data-role="timer">{{format-time-numeric lastTime}}</div>
      </div>
    {{/each}}
  </div>
</script>

Script

App.HabitsRoute = Ember.Route.extend( {
  actions: {
    createEvent: function( habitId ) {
      var self = this
      var store = this.get( 'store' )
      store.find( 'habit', habitId ).then( function( habit ) {
        store
          .createRecord( 'event', {
            habit: habit,
            time: new Date()
          } )
          .save().then( function( event ) {
            habit.get( 'events' ).then( function( events ) {
              if( ! events ) {
                events = []
                habit.set( 'events', events )
              }
              events.pushObject( event )
              habit.save().then( function() {
                self.transitionTo( 'events' )
              } )
            } )
          } )
      } )
    }
  }
} )