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”时，会出现一个完全空白的模式。然后，当我点击离开并点击我的第二​​个“.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 回答