Firing Jquery Plugin in View

1

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();
    Ember.run.scheduleOnce('afterRender', this, this.gallery);
  },

  gallery:function()
  {

     // This callback runs before lots_of_images has rendered.
   $("#container").mason({
    itemSelector: ".item",
    ratio: 1.5,
    sizes: [
        [1,1],
        [1,2],
        [2,2]
    ],
    
});
  }

});

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 }} /> 
             </div>

            {{/link-to}}
          
            {{/each}}

    </div>

    {{outlet}}

       
  </script>

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>

      
   </div>

Works properly

2

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() {
    $('#container').mason({
      itemSelector: '.item',
      ratio: 1.5,
      sizes: [[1,1], [1,2], [2,2]],
    });
  }).on('didInsertElement')
});

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.

Cheers,

James

1 Like
3

Tried as you said but still nothing Link to jsbin http://jsbin.com/didasewu/4/

4

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. raw.github.com 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).

http://jsbin.com/didasewu/6/

Cheers,

James

1 Like
5

thanks man

tried different solutions but seems that i mistyped the html

again thanks

6

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