0

Meteor アプリで、コレクション要素に編集機能を作成しました。したがって、すべての要素に 2 つの状態があります。通常のビューと編集フォーム。これら 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 に答える