How to implement jquery Isotope plugin wtih Backbone Marionette Views?

Question

i really don't know how to implement the Isotope plugin when using Backbone Marionette Views. Actually i'm doing this in my CompositeView:

class List.PostsView extends App.Views.CompositeView
    template: "#template"
    itemView: List.PostView

    appendHtml: (collectionView, itemView, index) ->
        $newItems = $(itemView.el)
        #console.log "newItems", $newItems

        $.getScript "//cdn.jsdelivr.net/isotope/1.5.25/jquery.isotope.min.js", ->
            $("#postsRegion").imagesLoaded ->
                $("#postsRegion").isotope
                    itemSelector: ".item"
                $("#postsRegion").isotope "insert", $newItems

This means, i overwrite the default method of Marionette for appending the itemView (childView).

It is working but i don't think it is the right way, this should be very slow because the Isotope plugin has to be initialized for every model again? I tried to initialize Isotope outside the View but that didn't worked even if #postsRegion is outside of the CompositeView template.

I need this in combination with the Marionette Views because every new model added to the collection should be rendered automatically. Also the ItemView gives me the template which should be appended in the DOM. (the template is a Bootstrap 3.0 Thumbnail - col-md-4)

I would be very grateful if someone could help me in this matter.

Marcel

Marcel Schulze Marcel Schulze · Accepted Answer · 2013-12-08T11:32:47

i figured it out.

If i load the isotope.js.plugin at start i can initialize isotope after the layout has been loaded and then list items with imagesLoaded plugin on the $itemview.el and "insert" them into isotope container.

I think this is a good way.

here some code examples:

Controller:

@layout = new Page.Layout

@listenTo @layout, "show", =>
     $("#itemsRegion").isotope  
          itemSelector: ".item"

     @listItems()

@show @layout

ListView:

class List.ItemsView extends App.Views.CompositeView
 template: "#items_list_parent"
 itemView: List.Item

 appendHtml: (collectionView, itemView, index) ->
    $newItems = $(itemView.el)

    $newItems.imagesLoaded ->
        $("#itemsRegion").isotope "insert", $newItems

Hope this helps someone too. Thank you. Marcel

How to implement jquery Isotope plugin wtih Backbone Marionette Views?

1 Answers