Question

我正在研究habit tracking app。我从一系列习惯开始。当用户点击习惯时，它会为该习惯创建一个新事件。我的列表工作正常，但我在创建新事件时遇到了困难。

要创建新活动，我有这条路线：

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

然后关联的路由器是：

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

据我所知，我可以访问查询参数的唯一地方是模型函数。

然后，控制器是：

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,
  ⋮

selectedHabit的返回值为null。

Answer 1

这实际上是有道理的，因为在调用setupController时，控制器作为参数传递，因此已经初始化（例如http://emberjs.jsbin.com/cuwadafu/1/edit）。这意味着已经调用了init函数，并且尚未设置selectedHabit属性。

一个解决方案可能是创建一个通用函数来创建事件（也可以从其他地方调用），并使用所有逻辑来观察selectedHabit属性。

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

这是answered on the Ember discussion board。我没有使用路线，而是采取了行动：

<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>

脚本

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

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

2 个答案: