Question

I am using Ember and am trying to execute some javascript code inside of a x-handlebars script segment (it isn’t possible to put a inside a is it?). Here is my code :

<script type="text/x-handlebars" data-template-name="home">

 <div id="slideshowfrontpage">

  <script type="text/javascript">

   $.vegas( 'slideshow' , {valign:'center',
   backgrounds: homeImgURLs
   })('overlay', {
   src:'css/images/overlays/01.png'
   }); 

  </script>

 </div>

</script>

How can I do something like this? Thank you!

Answer 1

When you want to fire javascript off every time an element is added to the DOM you should add that code in a didInsertElement method.

Em.View.create({
    templateName: 'home',

    didInsertElement: function(){
        this.$().vegas( 'slideshow' , {valign:'center',
            backgrounds: homeImgURLs
        })('overlay', {
            src:'css/images/overlays/01.png'
        }); 
    }
});

The this.$() will actually get you the DOM element of that view (which is really nice). Each time the view gets attached this will fire off once, there is a matching method for when it is removed from the DOM.