2

Meteor 0.6.2.1 を使用しています。

Meteor の Session.set() を呼び出すときに、Bootstrap モーダルで奇妙な問題が発生しました。

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

Bootstrap モーダルの例を .html ファイルにコピーします。

    <body>
        {{> hello}}
        {{> alert}}
    </body>

    <template name="hello">
        <h1>Hello World!</h1>
        {{greeting}}
        <input type="button" value="Click" />
        <br/>

        <!-- Button to trigger modal -->
        <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
    </template>

    <template name="alert">
        <!-- Modal -->
        <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">Modal header</h3>
            </div>
            <div class="modal-body">
                <p>One fine body…&lt;/p>
                <p>data = {{data}}</p>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                <button class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </template>

ボタンをクリックしたときにデータを設定します。

if (Meteor.isClient) {
  Session.set("data", "abcd");
  Template.hello.greeting = function() {
    return "Welcome to use-bootstrap.";
  };
  Template.alert.data = function() {
    return Session.get("data");
  };
  Template.hello.events({
    'click input': function() {
      if (typeof console !== "undefined" && console !== null) {
        return console.log("You pressed the button");
      }
    }
  });
  Template.hello.events({
    'click .btn': function() {
      var randomId;
      randomId = Random.id();
      console.log("data = " + Session.get("data"));

      // this cause duplicate Template.alert
      Session.set("data", randomId);
    }
  });
}

if (Meteor.isServer) {
  Meteor.startup(function() {
    return console.log("Server Start!!");
  });
}

クロムを使用してデバッグすると、ボタンをクリックするとモーダル要素が複製されることがわかります。

私のコードの問題は何ですか？

4

1 に答える 1

3

なぜこれが起こっているのかは 100% わかりませんが、JS コード (ブートストラップ) に保持されているモーダル ノードへの参照に関係していると思います。

それを解決するために、私は追加しました：

Template.alert.preserve(["#myModal"]);

流星のドキュメントから：

保持は、DOM 要素を同一または変更された要素に置き換えても、元の要素を保持した場合と同じ効果が得られないさまざまな場合に役立ちます。これらには以下が含まれます：

  • 入力テキスト フィールドおよびその他のフォーム コントロール
  • CSS アニメーションを含む要素
  • iframe
  • JavaScript コードに保持された参照を持つノード
于 2013-05-04T18:22:32.557 に答える