如何使用 Backbone Marionette Views 实现 jquery Isotope 插件？答案

【问题标题】：How to implement jquery Isotope plugin wtih Backbone Marionette Views?如何使用 Backbone Marionette Views 实现 jquery Isotope 插件？
【发布时间】：2013-12-17 08:27:12
【问题描述】：

在使用 Backbone Marionette Views 时，我真的不知道如何实现 Isotope 插件。实际上我是在 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

这意味着，我覆盖了 Marionette 的默认方法以附加 itemView（childView）。

它正在工作，但我认为这不是正确的方法，这应该很慢，因为必须再次为每个模型初始化 Isotope 插件？我试图在 View 之外初始化 Isotope，但即使 #postsRegion 在 CompositeView 模板之外，它也不起作用。

我需要将它与 Marionette Views 结合使用，因为添加到集合中的每个新模型都应该自动呈现。 ItemView 还为我提供了应附加在 DOM 中的模板。（模板是 Bootstrap 3.0 Thumbnail - col-md-4）

如果有人能在这件事上帮助我，我将不胜感激。

马塞尔

【问题讨论】：

标签： backbone.js marionette jquery-isotope

【解决方案1】：

我想通了。

如果我在开始时加载isotope.js.plugin ，我可以在加载布局后初始化同位素，然后在$itemview.el 上列出带有imagesLoaded plugin 的项目并将它们“插入”到同位素容器中。

我认为这是一个好方法。

这里有一些代码示例：

控制器：

@layout = new Page.Layout

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

     @listItems()

@show @layout

列表视图：

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

希望这对某人也有帮助。谢谢你。马塞尔

【讨论】：

聪明的解决方案！非常感谢:)。