Question

我有一个包含项目列表的页面。

当我点击列表中的项目时，会打开一个模态框，其中包含链接到此项目的图像轮播。

这是我的模板：

template(name="projects")
    #projects.page
        h1 Projets en cours
        section.feature-columns.row.clearfix
            each projects
                article.feature-col.col-md-4
                    a(href="#" class="project-item thumbnail linked")
                        with first_image
                            img(src="{{url}}" alt="{{_id}}" class="item-thumbnail")
                        .caption
                            h5 #{name}
                            p {{trimString description 100}}
    #common-modal.modal.fade.in
        .modal-dialog
            .modal-content
                button(class="close" data-dismiss="modal" aria-hidden="true") x
                .modal-body
                    with project
                        h1 {{name}}
                        p #{description}
                        .popup-image-gallery.owl-carousel.owl-theme
                            each images
                                .item
                                    img(src="{{url}}" alt="{{_id}}" width="100%")

这是我用来打开模态框的助手：

Template.projects.events
  "click .project-item": (e,instance) ->
    Session.set "currentProject", @_id
    $("#common-modal").modal("show")
    if owl
      owl.destroy()
    setTimeout( ->
      @owl = $("#common-modal .popup-image-gallery").owlCarousel
        autoPlay: 5000
        stopOnHover: true
        navigation: false
        paginationSpeed: 1000
        goToFirstSpeed: 2000
        singleItem: true
        lazyLoad: true
        autoHeight: true
        transitionStyle: "fade"
    , 1500)

当我点击第一个项目时，这是有效的。

当我点击另一个项目时，我不再工作了。

很明显，因为我应该杀死第一个旋转木马然后初始化新旋转木马，但我不知道该怎么做。

任何帮助？

感谢。

Answer 1

经过不同的尝试，我找到了这个解决方案：

首先，我将图像ID存储在会话变量

中

  images: ->
    ids = ProjectImages.find({project_id: @_id}).map (u) ->
      u.image_id
    c = Session.get "carousel_images"
    Session.set "ids", ids
    Images.find({_id: {$in: ids} })

然后我创建一个绑定到此会话变量的跟踪器，每次数据更改时都会销毁并重新创建Carousel：

Template.projects.rendered = ->
  Tracker.autorun ->
    Session.get "ids"
    owl = $("#common-modal .popup-image-gallery")
    owl.data("owlCarousel").destroy() if owl.data("owlCarousel")
    setTimeout( ->
      owl.owlCarousel
        autoPlay: 5000
        stopOnHover: true
        navigation: false
        paginationSpeed: 1000
        goToFirstSpeed: 2000
        singleItem: true
        lazyLoad: true
        autoHeight: true
        transitionStyle: "fade"
    , 500)

希望这有助于某人...

当会话变量改变时，meteor owl-carousel重新运行

1 个答案: