提问者:小点点

如何使用主干木偶视图实现jquery?


我真的不知道在使用主干木偶视图时如何实现同位素插件。实际上我在我的合成视图中这样做:

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)的默认木偶方法。

它正在工作,但我不认为这是正确的方式,这应该是非常缓慢的,因为同位素插件必须再次为每个模型初始化?我试图在视图之外初始化同位素,但即使#postsZone在CompositeView模板之外,这也不起作用。

我需要将其与木偶视图结合使用,因为添加到集合中的每个新模型都应该自动渲染。ItemView还提供了应该附加到DOM中的模板。(模板是引导3.0缩略图-col-md-4)

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

马塞尔


共1个答案

匿名用户

我想出来了。

如果我装同位素。js。开始时的插件我可以在加载布局后初始化同位素,然后在$itemview上使用imagesLoaded插件列出项目。el并将其“插入”到同位素容器中。

我认为这是一个好办法。

下面是一些代码示例:

控制器:

@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 

希望这对别人也有帮助。非常感谢。马塞尔