0

在我的 Meteor App 中，我在集合元素上构建了一个编辑功能。因此，我对每个元素都有 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 工作正常。

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

4

1 回答 1

0

由于没有给出导致问题的代码片段，因此很难放弃您给出的内容。我认为这可能与重新渲染的模板有关，因为它包含一些正在更新的反应性数据。因此，为此，在您的 HTML 中bookings使用隔离正在更新的数据

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

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

这样你的整个模板，包括你的 html 元素，id="booking-..."不会重新渲染，所以它的动画是可能的。

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

于 2013-03-27T05:57:50.233 回答