如何使用Backbone Marionette视图实现jquery同位素插件

Question

当使用Backbone Marionette视图时，我真的不知道如何实现同位素插件。事实上，我在我的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

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

它正在工作，但我认为这不是正确的方式，这应该很慢，因为同位素插件必须再次为每个模型初始化？我试图在视图之外初始化同位素，但即使#postsRegion在CompositeView模板之外，也没有成功。

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

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

Marcel

Answer 1

我想明白了。

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

我认为这是个好办法。

这里有一些代码示例：

控制器：

@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 

希望这也能帮助到别人。非常感谢。Marcel