Carousel using Ember

by Aras Balali Moghaddam

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.0-pre.2.min.js"></script>
<script type="text/x-handlebars" data-template-name="main">
    Carousel
    {{view Ember.ContainerView currentViewBinding="selectedView"}}
    {{#view Ember.Button action="previous" targetBinding="controller"}}Previous{{/view}}
    {{#view Ember.Button action="next" targetBinding="controller"}}Next{{/view}}
</script>

<script type="text/x-handlebars" data-template-name="aTemplate">
    The A View
</script>

<script type="text/x-handlebars" data-template-name="bTemplate">
    The B View
</script>
<script type="text/x-handlebars" data-template-name="cTemplate">
    The C View
</script>

CSS

.carousel-element{
    margin-left: -100px;
}

JavaScript

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

App.ApplicationView = Ember.View.extend({
    templateName: 'main'
});

//Array of template names which contains carousel element
App.viewArray = Ember.A(["aTemplate", "bTemplate", "cTemplate"]);

App.ApplicationController = Ember.ArrayController.extend({
    currentIndex: 0,
    //This will give the next/previous view
    selectedView: function() {
        currentIndex = this.get('currentIndex');
        template = App.viewArray.get(currentIndex);
        return Ember.View.create({
            templateName: template,
            classNames: ["carousel-element"],
            didInsertElement: function() {
                $(this.$()[0]).animate({
                    opacity: 1,
                    marginLeft: '+=100'
                }, 500);
            }
        });
    }.property('currentIndex'),
    previous: function() {
        if (this.get('currentIndex') !== 0) {
            currentIndex = this.get('currentIndex');
            this.set('currentIndex', currentIndex - 1);
        }
    },
    next: function() {
        if (this.get('currentIndex') !== (App.viewArray.length - 1)) {
            currentIndex = this.get('currentIndex');
            this.set('currentIndex', currentIndex + 1);
        }
    },

});

App.Router = Ember.Router.extend({
    root: Ember.Route.create({
        index: Ember.Route.create({
            route: '/'
        })
    })
});

App.initialize();