Ember.js, How do I use Javascript in a view?

Question

I'm pretty new to Ember and I'm having a problem that googling and reading the docs hasn't helped me with much yet. In my index view, I have a small <ul> that I'm using roundabout.js on to make it into a carousel slider. The problem, is that for the life of me, I can't get Ember to let me use Javascript on the DOM. :( Any advice would be very appreciated.

The <ul> looks like:

<ul id="games">
                <li class="god"><img src="{{URL::asset('images/doge.png')}}" alt="doge" height="400" width="400"/></li>
                <li class="doge">Wow</li>
                <li class="doge">Much move</li>
                <li class="doge">Many Smooth</li>
                <li class="doge">Doge is world</li>
                <li class="doge">Very slide</li>
                <li class="doge">Amaze</li>
                <li class="doge">To the moon!</li>
</ul>

And the code to make it into a carousel is:

    $('#games').roundabout({
    minZ: 100,
    maxZ: 300,
    tilt: -4,
    childSelector: '.doge'
    });

And the finished product should look like: enter image description here

Here's the ember code I used following @fanta's advice:

App.Index= Ember.View.extend({      
    didInsertElement : function(){
         Ember.run.schedule('afterRender', function(){
            $('#games').roundabout({
            minZ: 100,
            maxZ: 300,
            tilt: -4,
            childSelector: '.doge'
            });
         });
    }
});

in your view, override the didInsertElement function, and put your carousel code there, that should work. App.IndexView = Ember.View.extend({templateName: 'path_to_your_template', didInsertElement: function(){ //code here }}) — fanta
– fanta, Commented Feb 25, 2014 at 23:16
wrap your code in a Ember.run.schedule('afterRender', function() {// code}) and the code should go in the same function. — fanta
– fanta, Commented Feb 25, 2014 at 23:32

fanta · Accepted Answer · 2014-02-25 23:49:59Z

1

ok, here is JSFiddle with what I've told you, the only thing is that I copied and pasted the carousel code there, just go to the relevant code

http://jsfiddle.net/NQKvy/792/

App.IndexView = Ember.View.extend({
  didInsertElement: function() {
    Ember.run.schedule('afterRender', function() {
        $('#games').roundabout({
            minZ: 100,
            maxZ: 300,
            tilt: -4,
            childSelector: '.doge'
        });
    });
  }
})

answered Feb 25, 2014 at 23:49

fanta

1,48913 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

fanta Over a year ago

aren't you defining the App.IndexView twice ?, that has happened to me.

samuraiseoul Over a year ago

-_- And now I'm an idiot. That was it. I couldn't have a virtual view earlier for animated transitions, and defined it twice. Lol

Collectives™ on Stack Overflow

Ember.js, How do I use Javascript in a view?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related