Question

我真的不知道在使用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缩略图 - col-md-4）

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

马塞尔

Answer 1

我明白了。

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

我认为这是一个好方法。

这里有一些代码示例：

控制器：

@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

希望这对某人也有帮助。谢谢。烫发

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

1 个答案: