Question

在我的Meteor应用程序中，我在集合元素上构建了一个编辑功能。因此，每个元素都有2个状态;普通视图和编辑表单。我使用jQuery来获得一个很好的滑块效果，在这两种状态之间切换。

Template.bookings.events
  'click .edit-booking': (event) ->
    event.preventDefault()
    bookingId = event.currentTarget.dataset.booking
    $('#booking-' + bookingId + '-data').slideToggle('slow')
    $('#booking-' + bookingId + '-form').slideToggle('slow')

这很好用。但是在更新的回调函数中，我尝试再次关闭表单，在那里我遇到了问题。

  Meteor.call('updateBooking', {id: id, title: title, hours: hours},
             (error, booking) ->
               unless error
                 $.bootstrapGrowl "saved successfully", {align: 'center', type: 'success'}
                 $('#booking-' + id + '-data').slideToggle('fast')
                 $('#booking-' + id + '-form').slideToggle('fast')
                 booking
               else
                 $.bootstrapGrowl error.message, {align: 'center', type: 'error'}
                 error
             )

我的模板的反应式刷新以某种方式停止了jquery事件，我不知道如何实现它。我看到表格关闭了一个分秒然后重新打开:) bootsrtapGrowl工作正常。

任何人都可以给我一个提示。非常感谢。马库斯

Answer 1

由于没有给出导致问题的代码，因此很难取消你所提供的内容。我认为这可能与重新呈现的模板有关，因为它包含一些正在更新的反应数据。因此，在bookings的HTML中，使用围绕正在更新的数据的隔离

<template name="bookings">
    ...
    <div id="booking-xxx-yyyy">
        ....
        {{#isolate}}
            {{data}}
        {{/isolate}}
        ...
     </div>
    ...
</template>

这样做是{{#isolate}}之间的所有内容在数据发生变化时自行呈现，就像它是一个子模板一样。

这样您的整个模板（包括带有id="booking-..."的html元素）都不会重新渲染，因此可以使用其动画。

目前看起来动画开始，然后模板重新渲染，因此DOM被刷新，JQuery失去了对旧动画的跟踪。

模板刷新会停止jQuery事件

1 个答案: