模板刷新停止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事件

回答

相關問題