Ember outlet animation depending on current page

Design
1

So I am attempting to create a phonegap app using EmberJS and its proving to be a great choice. The only problem is that my client wants the view changes (say from tab 1 to 3) slide in the appropriate direction. You wouldn’t want tab 1 to slide to the right and reveal tab 3 would you? So rather thank using {{#link-to-animated}} i decided to use bound {{action}} which then have a variable currentView which contains an int between 1 and 5 (there are 5 tabs so 5 templates).

This is the solution I came up with and I get no errors but I also get no page transitions which is proving to be puzzling for me. Would anyone like to lend a helping hand in figuring out what is going on here?

    App.ApplicationController = Ember.Controller.extend({
      currentView: 1,
      actions: {
        goToHome: function() {
          console.log(this.get('currentView'));
          if(this.get('currentView') == 1) {
            console.log(this.get('currentView'), 'do nothing');
          } else {
            this.set('currentView', 1);
            this.transitionToRouteAnimated('index', {main: 'slideRight'}, App.CARDS);
          }
        },
        gotToRecent: function() {
          console.log(this.get('currentView'));
          if(this.get('currentView') == 2) {
            console.log(this.get('currentView'), 'do nothing');
          } else if(this.get('currentView') < 2) {
            this.set('currentView', 2);
            this.transitionToRouteAnimated('recent', {main: 'slideRight'}, null);
          } else {
            this.set('currentView', 2);
            this.transitionToRouteAnimated('recent', {main: 'slideLeft'}, null);
          }
        },
        goToFavorites: function() {
          console.log(this.get('currentView'));
          if(this.get('currentView') == 3) {
            console.log(this.get('currentView'), 'do nothing');
          } else if(this.get('currentView') < 3) {
            this.set('currentView', 3);
            this.transitionToRouteAnimated('favorites', {main: 'slideRight'}, null);
          } else {
            this.set('currentView', 3);
            this.transitionToRouteAnimated('favorites', {main: 'slideLeft'}, null);
          }
        },
        goToFriends: function() {
          console.log(this.get('currentView'));
          if(this.get('currentView') == 4) {
            console.log(this.get('currentView'), 'do nothing');
          } else if(this.get('currentView') < 4) {
            this.set('currentView', 4);
            this.transitionToRouteAnimated('friends', {main: 'slideRight'}, null);
          } else {
            this.set('currentView', 4);
            this.transitionToRouteAnimated('friends', {main: 'slideLeft'}, null);
          }
        },
        goToProfile: function() {
          console.log(this.get('currentView'));
          if(this.get('currentView') == 5) {
            console.log(this.get('currentView'), 'do nothing');
          } else {
            this.set('currentView', 5);
            this.transitionToRouteAnimated('profile', {main: 'slideLeft'}, null);
          }
        }
      }
    });

When I click the buttons with the bound, for example {{action goToHome}}, the correct output is printed to the console but the page does not change. Any help would be wonderful.

2

Try omitting the null model argument and see if that makes a difference. Also, what does your template look like? You will need to define an animated-outlet with the name main in your ApplicationTemplate if you haven’t already. For example:

<script type="text/x-handlebars" data-template-name="application">
    {{#if isHome}}
        {{outlet home}}
    {{else}}
        {{#if isFourOhFour}}
            {{outlet fourohfour}}
        {{else}}
            {{render "header"}}
            {{#unless dismissSignupSuggest}}
                {{render "signup_suggest"}}                
            {{/unless}}
            <section class="main-content clear-fix" >
                {{render "discoveryTutorial"}}
                {{animated-outlet name="main"}}
                {{error-dialog}}
            </section>
        {{/if}}
    {{/if}}
</script>

I also just realized that this was you, small world…what’s up?

Also, by default I override renderTemplate on many of my routes using a mixin that prevents me from having to specify what outlet I want it to render in unless I want to deviate from the norm.

App.BaseRouteMixin = Ember.Mixin.create({
    renderTemplate: function() {
        this.render({ outlet: 'main' });
    }
};

However, that just helps in the case a route is visited directly; you still have to specify an outlet for animated outlet for link-to/transitions to work correctly.

3

@mbaker000, I omitted the null model along with the App.CARDS model and it started working. The documentation needs to state that you can also omit a model in the statement.

4

It’s actually no different than if you were to send a null model in a call to ember’s built in route.transitionTo. In the Javascript world sending null explicitly to functions to indicate that you aren’t providing it usually doesn’t happen. It’s just omitted from the call completely.