0

さて、Bootstrap 3 で Meteor を実行しています。私のページにはモーダルがあります。

<template name="bookModal">
<div class="modal fade" id="bookModal">
  <div class="modal-dialog">
    <div class="modal-content">
        {{#each book}}
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">{{title}}</h4>
      </div>
      <div class="modal-body">
        <img class="img-responsive modalBookImage" src="{{imglg}}"></img>
      </div>
      <div class="modal-footer">
        <p>maybe this is the problem</p>
      </div>
      {{/each}}
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</template>

そして、コレクションからそのテンプレートにデータをフィードします。

Template.bookModal.book = function() {
    return Books.find({_id: Session.get('bookModalID')});
}

そして、別のテンプレートのイベントによってトリガーされます。

Template.home.events({
    'click .showBookModal': function(e) {
        Session.set("bookModalID", e.target.id);
        $('#bookModal').modal('show');
    }
});

クリックされたものの ID を取得し、Books で検索して情報を検索し、テンプレートに入力してモーダルを表示します。右？

しかし、デバッグ方法がわからないという非常に奇妙なエラーが発生しています。

最初の「.showBookModal」をクリックすると、完全に空白のモーダルが表示されます。次に、別の場所をクリックして 2 番目の '.showBookModal' をクリックすると、最初にクリックした項目に関するモーダルがポップアップ表示されます。このパターンは続き、モーダルが開くたびに、新しい Session.get("bookModalID") に対応するデータは表示されませんが、終了したばかりのデータが表示されます。

何が起きてる？

4

1 に答える 1

0

編集

Meteor 0.8 以降、新しいレンダリング エンジン (blaze) ではコンテンツが変更された場合に DOM 要素が再レンダリングされないため、この回答は非推奨です。

問題は、モーダルdivノードが再レンダリングされることです。これは起こるべきではありません。divそうしないと、ブートストラップ ルーチンが機能しないため、 のコンテンツのみを再レンダリングできます。この問題を解決するには、別のテンプレートを作成します。

<template name="bookModalContent">
    ...
</template>

あなたが書くことができるように：

<template name="bookModal">
  <div class="modal-dialog">
    <div class="modal-content">
      {{> bookModalContent}}
    </div>
  </div>
</template>

または、リアクティブになるテンプレート{{#isolate}}の一部:bookModal

<template name="bookModal">
  <div class="modal-dialog">
    <div class="modal-content">
      {{#isolate}}
        {{#with book}}
          ...
        {{/with}}
      {{/isolate}}
    </div>
  </div>
</template>
于 2013-11-12T08:23:09.960 に答える