模板刷新停止 jQuery 事件答案

【问题标题】：Template refresh stops jQuery event模板刷新停止 jQuery 事件
【发布时间】：2013-03-16 00:28:27
【问题描述】：

在我的 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 工作正常。

谁能给我一个提示。非常感谢。马库斯

【问题讨论】：

hide(0) 和 show(0) 可以解决问题...切换不起作用，因为它会被调用两次。
如果在您的方法 updateBooking 中更新了表单所在的模板中的数据，您将重新呈现表单。因此，正在发生的事情是表单开始滑动关闭，并且由于某些数据已更改，因此流星重新渲染了表单。我建议将 div #booking-#-data 放在重新渲染的模板之外
这是不可能的，因为在存储数据之后，它也必须重新加载这部分......但正如我之前提到的......这是切换事件的问题，即叫了两次。我现在使用特定的 toggleUp 和 toggleDown 来解决问题

标签： jquery meteor

【解决方案1】：

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

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

它的作用是{{#isolate}} 之间的所有内容都会在其数据更改时自行呈现，就好像它是一个子模板一样。

这样您的整个模板，包括带有 id="booking-..." 的 html 元素都不会重新渲染，因此它的动画是可能的。

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

【讨论】：