Navigation View ( left to right animation ) with Ember.

app.js

App.navMainView = Luh.Ui.NavigationMainView.create({
});


App.NavigationView = Luh.Ui.NavigationView.extend({
  hasBackBinding: Em.Binding.oneWay('App.navMainView.hasBack'),
  template: Em.Handlebars.compile('<div id="header">{{#if hasBack}}{{#view App.BackButton class="button bordered back"}}HBack{{/view}}{{/if}}{{#view App.NextButton class="button bordered next"}}Next{{/view}}</div><div id="footer"></div>') 
});


App.navMainView.appendTo('#nav_main_container');

var view = App.NavigationView.create({
  classNames: ['bg_green']
});
App.navMainView.pushView( view );

App.BackButton = Em.View.extend(Luh.Ui.bTap, {
  bTap: function() {
    App.navMainView.popView();
  }
});

App.NextButton = Em.View.extend(Luh.Ui.bTap, {

  bTap: function() {

    var view = App.NavigationView.create({
      classNames: ['bg_black']
    });

    App.navMainView.pushView(view);

  }

});


App.backButton = App.BackButton.create({});

nav.css

#nav_main_container{

  position:absolute; 
  left:0px; 
  top:0px; 
  width:100%; 
  height:100%; 
  background-color:blue; 
}


.nav_root{
  /* width will be updating when nav_view are handled */
}

.nav_view{
  /* set a new point of reference for absolutely positioned elements that are nested inside it */
  position:relative; 
  float: left;
}

navigation_view.js

var get = Ember.get , set = Ember.set, setPath = Ember.setPath, getPath = Ember.getPath;

Luh.Ui.NavigationViewMixin = Em.Mixin.create({
  classNames: ['nav_view'],

  navigationMainView: SC.computed(function() {
    return this.nearestInstanceOf(Luh.Ui.NavigationMainView);
  }).property(),

  didInsertElement: function() {

    this._super();
    var root = this.get('navigationMainView');

    var width = root.get('nvWidth');
    var height = root.get('nvHeight');

    this.$().height(height);
    this.$().width(width);

    // move to main view logic by observing insertions

    root.updateRootView();
    root.move(true);

  }
});

Luh.Ui.NavigationContainerView = Em.ContainerView.extend( Luh.Ui.NavigationViewMixin, {
});

Luh.Ui.NavigationView = Em.View.extend( Luh.Ui.NavigationViewMixin, {
});

Luh.Ui.NavigationMainView = Ember.ContainerView.extend({

  classNames: ['nav_root'],
  nvWidth: null,
  nvHeight: null,
  position: null,
  duration: '1s',


  didInsertElement: function() {

    var height = $(window).height();   
    var width = $(window).width();   

    this.$().height(height);

    set(this, 'nvHeight', height);
    set(this, 'nvWidth', width);


    var parentId = this.$().parent().attr("id");
    //TODO: can be substituted for finding the next layout antecestor 
    set(this, 'parentId', parentId );

  },

  hasBack: Ember.computed( function() {
    return this.get('_childViews').get('length') > 1;
  }).property('_childViews.@each'),

  move: function(hasBeenInsertedElement, callback) {

    var position = this.get('position');

    if ( position === null ) {
       position = 0;
    } else {

      var parentId = this.get('parentId');

      var width = this.get('nvWidth');
      position += (hasBeenInsertedElement) ? width*(-1): width;

      move('#'+parentId)
        .x(position)
        .duration(this.duration)
        .end( function() {

            if ( callback ) {
              callback();
            }

        });
    }
    set(this,'position', position);
  },

  updateRootView: function(){

    var width = this.get('nvWidth');
    var length = this.get('childViews').get('length');
    this.$().width(length*width);

  },

  pushView: function(newView,animated) {

    //set(newView, 'root', this);  done with nearestInstanceOf 
    //this.appendChild(newView);--> exception cannot append out of
    //rendering process
    
    var child = this.get('childViews');
    set(newView, '_parentView', this);
    child.pushObject(newView);

  },

  popView: function(animated) {
    
    var that = this; 

    this.move(false, function() {

      var child = that.get('childViews');
      child.popObject();
      that.updateRootView();

    });

  }

});