2

Meteor 0.5.4 を使用しています。Meteor の Session.set() で奇妙な問題が発生しました。

ユーザーがテンプレート インスタンスをクリックしたときに、単純なモーダル ダイアログを表示したいと考えています。

ユーザーがテンプレートインスタンスをクリックしたときに、テンプレートのイベントマップを使用してセッションに情報を設定しています。

Template.Orders.events({
'click' : function () {
    Session.set("OrderName", this.name);
}
});

モーダル ダイアログ テンプレートは、セッション内のデータ セットを表示します。

Template.OrderDialogue.OrderName = function() {
    return Session.get("OrderName");
}

そして最後に、これが私のJQueryコードです

Template.Orders.rendered = function() {
    jQuery('a[rel*=leanModal]').leanModal();
}

上記の Template.orders のクリック イベント ハンドラ内で Session.set() を使用すると、JQuery プラグインはテンプレート インスタンスの最初のクリックではモーダル ダイアログを表示せず、その正確なインスタンスの 2 回目のクリックでのみ表示します。モーダル ダイアログを取得するには、テンプレート インスタンスを 2 回クリックする必要があります。

Session.set() を削除すると、すべてが正常に機能します。最初のクリックでモーダル ダイアログが表示されます。

デバッグ出力は、最初のクリックでセッション値が適切に設定されていることを示しています。

Session.set() はどのように JQuery プラグインを妨害しますか?

4

1 に答える 1

2

leanModalOrderDialogueは、Meteor エンジンが新しいコンテンツを反応的に注入する前の HTML コンテンツを表示していleanModalますsetTimeout。

あなたが持っていると仮定します：

<template name="OrderDialogue">
    <div id="overlay_content">
       <h1>{{OrderName}}</h1>
    </div>
</template>

<template name="Orders">
    {{#each order}}
        <a href="#overlay_content" rel="leanModal">{{name}}</a>
    {{/each}}
</template>

そしてあなたのJavaScript：

Template.Orders.events({
   'click' : function () {
      Session.set("OrderName", this.name);
   }
});

Template.OrderDialogue.OrderName = function() {
   return Session.get("OrderName");
}

Template.Orders.rendered = function() {
   $("a[rel*=leanModal]").leanModal();
}

次に、イベントのバブリングの前にコンテンツsetTimeoutをレンダリングするための瞬間を反応性に与えるために、オンザクリック イベント ハンドラーを使用して、leanmodal ウィジェットをハックする必要があります。OrderName

これが scriptであると仮定すると、次のように、このスクリプト (23 行目あたりから) でクリック ハンドラーをラップします。

$(this).click(function(e) {
    setTimeout(function() {
        var modal_id = $(this).attr("href");
        ...
    }, 1);
});
于 2013-01-20T20:41:50.563 に答える