Firing Jquery Plugin in View

I have the following problem Created a list of images and now I want to apply some nice layout to them using mason.js Only problem is that the mason.js plugin don’t apply to the divs.Now if I try to use static template without emberjs in it it works correctly

    App.ImagesView = Ember.View.reopen({
  didInsertElement: function(){
     this._super();'afterRender', this,;


     // This callback runs before lots_of_images has rendered.
    itemSelector: ".item",
    ratio: 1.5,
    sizes: [


And my view:

   <script type="text/x-handlebars" id="images" >
  <div id="#container">

     {{#each model}}

            {{#link-to 'post' this}} 

             <div class="item">
                  <img {{bind-attr src=title }} /> 





If I try something like this:

  <div id="container">

     <div class="item" ><img src="img/ng.jpg"/></div>
   <div class="item" ><img src="img/ng.jpg"/></div>
<div class="item" ><img src="img/ng.jpg"/></div>


Works properly

Rather than using reopen try using extend like so:

App.ImagesView = Ember.View.extend( {

reopen will wind up adding this code to any View that is created, not what you’re trying to do (i hope).

The way I typically do my jQuery plugin initialization is something like this:

App.ImagesView = Ember.View.extend({
  initPlugin: (function() {
      itemSelector: '.item',
      ratio: 1.5,
      sizes: [[1,1], [1,2], [2,2]],

I think you could also use this.$() to get a jQuery object scoped to your view; so you don’t have to look for a particular ID. However, I didn’t change the code from yours in this case.



1 Like

Tried as you said but still nothing Link to jsbin

You had it pretty much correct, you just had two errors:

  1. The div’s id was set to #container it should have been just container, the css selector to specify an ID is what requires the # prefix, not when you give the element an ID.
  2. serves up its content as plain-text, this prevents browsers from running the script. Since this is mainly an issue when using jsbin and the like there are workarounds to this, such as sites that will re-send that content with the appropriate mime/type headers (and if you pay attention to my edit you’ll see one workaround).



1 Like

thanks man

tried different solutions but seems that i mistyped the html

again thanks

Do I have to initialize all of the plugins on each view?

Am trying to find a place to include all of the generic plugins that are used across the website but failing to do so