Ember jQuery SkyCarousel integration

Ember, jQuery SkyCarousel integration using CollectionView and Ember.run.scheduleOnce('afterRender')

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script src="http://www.skyplugins.com/sky-jquery-touch-carousel/js/jquery.sky.carousel-1.0.2.min.js"></script>
<script src="http://builds.emberjs.com/canary/ember-data.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
   {{#each team in content}}
    <li> 
      {{#linkTo "team" team}}
        {{team.name}} 
      {{/linkTo}}
    </li>
   {{/each}}
    
<div class="sky-carousel">
  <div class="sky-carousel-wrapper">
    {{view App.CarouselView contentBinding=""}}
   </div>
</div>
</script>

<script type="text/x-handlebars" data-template-name="carousel-item">
  <img src="http://www.charbase.com/images/glyph/9634" alt="" />
  <div class="sc-content">
    <p>{{view.content.name}}</p>
  </div>
</script>

<script type="text/x-handlebars" data-template-name="team">
<h1>team</h1>
<p>{{content}}</p>
<p>{{teams}}</p>
    
<div class="sky-carousel">
  <div class="sky-carousel-wrapper">
    {{#if teams.isSettled}}
        {{view App.CarouselView contentBinding="teams"}}
    {{else}}
        <p>Loading...</p>
    {{/if}}      
  </div>
</div>
</script>

CSS

/**
 *
 * Sky jQuery Touch Carousel
 * URL: http://www.skyplugins.com
 * Version: 1.0.2
 * Author: Sky Plugins
 * Author URL: http://www.skyplugins.com
 *
 */

/**
* Table of Contents
* 
* 1. Media Queries
* 2. Container Styles
* 3. Carousel Item Styles
* 4. Current Content Styles
* 5. Gradient Overlay Styles
* 6. Navigation Styles
* 7. Preloader Styles
* 8. Other Styles
*/

/**********************************************
*
* 1. Media Queries
*
**********************************************/
@media screen and (-webkit-min-device-pixel-ratio:0) { 
  html {
    margin-left: 1px;
  }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .sky-carousel .sc-overlay {
    width: 160px !important;
  }
}

@media only screen and (max-width: 479px) {
  .sky-carousel .sc-overlay {
    width: 70px !important;
  }
}

/**********************************************
*
* 2. Container Styles
*
**********************************************/
.js .sky-carousel {
  visibility: hidden;
}

.sky-carousel {
  //width: 960px;
  height: 200px;
  position: relative; 
  border: 1px solid #e7e7e7;
  background: #f5f5f5;
  overflow: hidden;
  margin: 0 auto; 
}

.sky-carousel .sky-carousel-container {
  position: relative;
  list-style-type: none;
  float: left;
  margin: 0;
  padding: 0;
}

/**********************************************
*
* 3. Carousel Item Styles
*
**********************************************/
.sky-carousel .sky-carousel-container li {
  position: absolute;
  border: 0;
}

.sky-carousel .sky-carousel-container li img {
  display: block;
  border: 0;
  max-width: none !important;
}

.sky-carousel .sky-carousel-container li a img {
  border: none;
}

.sky-carousel .sky-carousel-container .sc-content {
  display: none;
}

/**********************************************
*
* 4. Current Content Styles
*
**********************************************/
.sky-carousel .sc-content-wrapper {
  position: absolute;
  text-align: center; 
  width: 100%;
  top: 81%;
 ...

JavaScript

App = Ember.Application.create({});

App.Router.map(function () {
  this.resource('teams');
  this.resource('team', { path: 'teams/:team_id'});
});

App.ApplicationRoute = Ember.Route.extend({  
  setupController: function () {
    this.controllerFor('team').set('teams', this.store.find('team'));
  }
});

App.IndexRoute = Ember.Route.extend({
  
  // This redirect threw skycarousel error: 
  // 'Cannot call method 'addClass' of undefined'
  // Comment out the redirect and use the linkto to navigate to the detail page and there isn't an error
  // Solution for detail page: PromiseArray has isSettled property instead of isLoaded
  // Added it to the 'team' template
    
  redirect: function() {
    this.transitionTo('team', this.store.find('team', 1));
  },   
  model: function() {
    return this.store.find('team');
  }
});

App.TeamController = Ember.ObjectController.extend({
  teams: []
});

App.CarouselItemView = Ember.View.extend({  
  templateName: 'carousel-item'
})

App.CarouselView = Ember.CollectionView.extend({  
  tagName: 'ul',
  classNames: ['sky-carousel-container'],
  carousel: null,
  itemsAreLoaded: false,
  callDecorate: function () {
    this.$().decorate();
  },
  intializeCarousel: function(){
    console.log('intializeCarousel');
    this.carousel = $('.sky-carousel').carousel({
      itemWidth: 200,
      itemHeight: 200,
      distance: -10,
      selectedItemDistance: 35,
      selectedItemZoomFactor: 0.9,
      unselectedItemZoomFactor: 0.8,
      unselectedItemAlpha: 0.6,
      motionStartDistance: 140,
      topMargin: 0,
      gradientStartPoint: 0.36,
      gradientOverlayColor: "#f5f5f5",
      gradientOverlaySize: 190,
      selectByClick: true
    });

    this.carousel.select(0, 2);
    self=this;

    this.carousel.on('itemSelected.sc', function(evt) {
      console.log(evt.item.index());
      self.teamChanged(evt.item.index());
    });       
      
  },
  
    itemViewClass: 'App.CarouselItemView',
  
    didInsertElement:...