CODEWITHSUNDEEP
ember.js
Joe Fiorini
Joe Fiorini

Reputation: 641

Handling transition into route via back button

Here's the situation. I'm writing an Ember.js example in which I'm displaying a list of sticky notes on the page. Each note has a permalink that, when click, shrinks the list down 6 columns instead of 12 and then shows the note in the empty space. It works just fine when I click the link, but when I use the back button to go back to the list, it doesn't work. Here's my code:

App.Router.map(function(){
  this.resource("notes", function(){
    this.resource("note", { path: "/:note_id" });
  });
});

App.NotesRoute = Ember.Route.extend({
  model: function(){
    return App.Note.find();
  },
  setupController: function(controller){
    controller.set("isShowing", false);
  }
});

App.NoteRoute = Ember.Route.extend({
  setupController: function(){
    this.controllerFor("notes").set("isShowing", true);
  }
});

And a template for each state:

<script type="text/x-handlebars">
  <div class="row">
    <div class="twelve columns">
      <h1>Ember Stickies</h1>
      {{outlet}}
    </div>
  </div>
</script>

<script type="text/x-handlebars" data-template-name="notes">
  <div class="row">
    <div class="twelve columns">
    <h3>My Notes</h3>
    </div>
  </div>
  <div class="row">
    <div {{bindAttr class="isShowing:six:twelve :columns"}}>
      <ul class="block-grid four-up mobile-one-up">
      {{#each note in controller}}
        <li class="sticky-list-item">
          {{view Ember.TextArea classNames="sticky-note" valueBinding="note.content"}}
          {{#linkTo note note classNames="sticky-permalink"}}
            ∞
          {{/linkTo}}
        </li>
      {{/each}}
      </ul>
    </div>
    {{outlet}}
  </div>
</script>

When Ember calls NoteRoutes setupController it sets isShowing to true. However, when I use the back button to go back to NotesRoute, setupController isn't called, therefore isShowing never changes to false. I assume this is intentional Ember behavior, so is there a callback I can use to hook into this transition?

Upvotes: 2

Views: 3843

Answers (2)

Rod Afshar
Rod Afshar

Reputation: 21

As of Ember 1.0.0-rc.1, deactivate has been added as the public hook for exit. You no longer need to call _super and should not use exit anymore.

App.NoteRoute = Ember.Route.extend({
  setupController: function(){
    this.controllerFor("notes").set("isShowing", true);
  },
  deactivate: function(){
    this.controllerFor("notes").set("isShowing", false);
  }
});

http://emberjs.com/api/classes/Ember.Route.html#method_deactivate

http://emberjs.com/blog/2013/02/15/ember-1-0-rc.html

Upvotes: 2

Joe Fiorini
Joe Fiorini

Reputation: 641

I figured it out by searching the Github issues. Routes have an exit callback that triggers on transition out. My route handler now looks like (n.b. the call to this._super() at the end of exit – extremely important!):

App.NoteRoute = Ember.Route.extend({
  setupController: function(){
    this.controllerFor("notes").set("isShowing", true);
  },
  exit: function(){
    this.controllerFor("notes").set("isShowing", false);
    this._super();
  }
});

Upvotes: 0

Related Questions