Bootstrap carousel in an Ember app-Collection of common programming errors

I’m a bit new to ember. I have my app basically setup the way I want it, but now I need to add a carousel to the page. I add the following sample (taken from bootstrap’s example) to my template:


    
    
    
        A
        B
        C
    
    
    ‹
    ›


When I then click on the next or previous buttons, I get the following Error in my log:

Uncaught Error: No route matched the URL 'myCarousel' ember-1.0.0-rc.2.js:22641
Router.handleURL ember-1.0.0-rc.2.js:22641
Ember.Router.Ember.Object.extend.handleURL ember-1.0.0-rc.2.js:23409
(anonymous function) ember-1.0.0-rc.2.js:23385
(anonymous function) ember-1.0.0-rc.2.js:25142
(anonymous function) ember-1.0.0-rc.2.js:4360
Ember.handleErrors ember-1.0.0-rc.2.js:411
invoke ember-1.0.0-rc.2.js:4358
tryable ember-1.0.0-rc.2.js:4547
Ember.tryFinally ember-1.0.0-rc.2.js:1102
Ember.run ember-1.0.0-rc.2.js:4551
(anonymous function) ember-1.0.0-rc.2.js:25136
jQuery.event.dispatch jquery-1.9.1.js:3074
elemData.handle

Is there something special I need to do to tell ember to make this work?

  1. it looks like a missing route to your ‘myCarousel’ – template.

    Update

    TEMPLATES

    
        {{outlet}}
    
    
        myCarousel
        
        
        
        
            A
            B
            C
        
        
        ‹
        ›
    
    
    
    

    JS

    App = Ember.Application.create({});
    
    App.IndexRoute = Ember.Route.extend({
        redirect: function(){
            this.transitionTo('myCarousel')
        }
    });
    
    App.Router.map( function() {
        this.resource('myCarousel');
    });
    

    JSFiddle: http://jsfiddle.net/theremin/C3U5R/