模板刷新停止jQuery事件

在我的流星应用程序中，我在集合元素上构建了一个编辑功能。因此，我对每个元素都有2个状态;普通视图和编辑表单。我用jQuery有一个很好的滑块效果，在这两个状态之间切换。模板刷新停止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工作正常。

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

来源

2013-03-26 real.netfly

隐藏（0）和显示（0）的技巧...切换不起作用，因为它会被调用两次。 – 2013-03-26 09:29:04

如果您的方法中的数据更新updateBooking中的表单所在的模板中，将会重新呈现表单。所以发生的事情是表单开始滑动关闭，流星重新渲染表单，因为一些数据发生了变化。我建议将div #booking - ＃ - 数据放在重新呈现的模板的外侧 – adrianj98 2013-03-27 05:29:45

这不是可行的，因为在存储数据之后，它必须重新加载此部分......但正如我前面提到的那样。 ...这是一个切换事件的问题，它被称为两次。我现在使用特定的toggleUp和toggleDown，这个技巧 – 2013-03-28 15:36:23

由于导致问题的代码片段没有给出，所以很难将您给出的结果去掉。我认为这可能与模板被重新渲染有关，因为它包含一些正在更新的反应数据。因此，对于这一点，在你的HTML bookings使用分离各地正在更新

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

数据这样做是一切其间{{#isolate}}将呈现自身时，其数据变化，就好像它是一个子模板。

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

目前它看起来像动画开始，然后模板重新渲染，所以DOM刷新和JQuery失去旧动画的轨道。

来源

2013-03-27 05:57:50 Akshat

thnx，我会试试这个 – 2013-03-28 15:20:49

模板刷新停止jQuery事件

回答

相关问题