Ember-cli with Bootstrap carousel Uncaught TypeError: Cannot read property 'slice' of undefined

Question

When I'm trying to use carousel javascript component of the bootstrap library. I get Uncaught TypeError: Cannot read property 'slice' of undefined

Here is the part of the code that has the carousel in my application.hbs

<article class="carousel-moto slide" data-ride="carousel" id="carousel-example-generic">
    <hgroup class="carousel-inner">
        <h3 class="item">Blah</h3>
        <h3 class="item">blah</h3>
        <h3 class="item">blahhhhh</h3>
        <h3 class="item">bleh</h3>
    </hgroup>
</article>

routes/application.js

import Ember from "ember";

export default Ember.Route.extend({
    activate: function() {
        Ember.$('.carousel-moto').carousel();
    }
});

how do I get rid of this error?

UPDATE Here is the JS Bin http://jsbin.com/kiduma/1/

Automagisch Automagisch · Accepted Answer · 2014-09-14T07:30:21

Is the error coming from Ember or from the plugin? I can't actually tell you how to solve it, but Ember JS prototypes a lot of new and existing behaviors on objects like Arrays etc. (taken @.each, forEach etc.). You could try taking a look at this; http://emberjs.com/guides/configuring-ember/disabling-prototype-extensions/, but it will also disable all cool features which make emberJS so awesome. You could also try to make a view (App.CarouselView for example), and append the utilisation of the plugin in the didInsertElement hook. Then you'll be sure that the element is actually there, because it could also be an error derriving from the Ember rendering tree.

So try to wrap your carousel in a view, and do stuff to it when the DOM is ready, if that is not solving it, look at the prototype behaviour of Ember.

   App.CarouselView = Ember.View.extend({
       classNames: ['.carousel-moto'],
       didInsertElement: function() {
           this.$.carousel();
       }
   });

Good thing about this, is that you can also add more easily specific stuff for the carousel in this, or even better, re-use it! :D isn't Ember beautifull?

Ember-cli with Bootstrap carousel Uncaught TypeError: Cannot read property 'slice' of undefined

1 Answers