index.html

{{#view Luh.Ui.TabMainView currentView="pane1"}}

	{{#view Luh.Ui.TabPaneView id="pane1" class="content" viewName="pane1"}}

	{{/view}}

	{{#view Luh.Ui.TabPaneView id="pane2" class="content" viewName="pane2"}}

	{{/view}}

	{{#view Luh.Ui.TabPaneView id="pane3" class="content" viewName="pane3"}}



	{{/view}}

<ul id="footer">
		{{#view Luh.Ui.SelectedTabView tagName="li" id="tab1" value="pane1"}}Carousel{{/view}}
		{{#view Luh.Ui.SelectedTabView tagName="li" id="tab2" value="pane2"}}List{{/view}}
		{{#view Luh.Ui.SelectedTabView tagName="li" id="tab3" value="pane3"}}ImageSlider{{/view}}
</ul>

{{/view}}

tab_view.js

Luh.Ui.TabMainView = Ember.View.extend({

  controller: null,
  panes: {},

  init: function() {
    this._super();
  },

  willInsertElement: function() {

    this._super(); 
    var panes = get( this, 'panes');

    var viewName, childViews, len, view, idx;

    childViews = get(this, '_childViews');
    len = get(childViews, 'length');

    for(idx = 0; idx < len; idx++) {
      view = childViews[idx];
      viewName = get(view, 'viewName');   
      if ( view instanceof Luh.Ui.TabPaneView ) {
        panes[viewName] = view;     
      }
    }

    idx = 0;
    for( viewName in panes ) {
      panes[viewName].$().css("left", "100%"); 
      idx++;
    }

  },

  didInsertElement: function() {
    this._super(); 
    this.observesCurrentView();
  },

  observesBeforeCurrentView: function() {

    this.show(false);

  }.observesBefore('currentView'),

  observesCurrentView: function() {

    this.show(true);

  }.observes('currentView'), 

  show: function(visible, pane) {

    if ( pane === undefined ) {
      var currentView = get(this, 'currentView');
      var panes = get( this, 'panes');
      pane = panes[currentView];
    }
    
    var left = (visible)? "0%" : "100%";
    pane.$().css("left", left); 

  }

});

Luh.Ui.TabPaneView = Ember.View.extend({

});


Luh.Ui.TabView = Ember.View.extend({

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

  touchHoldEnd: function(recognizer) {
    setPath(this, 'tabsContainer.currentView', get(this, 'value'));
  },

	click: function(){
    setPath(this, 'tabsContainer.currentView', get(this, 'value'));
  }

});