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/

Originally posted 2013-11-15 09:09:39.