Question

好的，所以我用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”）相对应的数据，而是刚刚结束的数据。

这里发生了什么？

Answer 1

修改

自Meteor 0.8以来，这个答案已弃用，因为在新的渲染引擎（blaze）中，如果DOM元素的变化，则不会重新渲染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>

流星模板落后一步

1 个答案:

修改