javascript - 在 meteor 模板中使用模态

Question

我有modal.html:

    <template name="modal">
      <div class="modal fade">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h2 class="modal-title">Dialog</h2>
            </div>
            <div class="modal-body">
              <p>
                Dialogs are typically used to prompt users to make a specific decision
                as part of or before continuing with a task or process. They can be used
                to inform users about a specific issue, to confirm particularly important
                actions, or to explain significant ramifications of an action before
                allowing the user to proceed.
              </p>
            </div>
            <div class="modal-footer">
              <button class="btn btn-flat pull-left">More info...</button>
              <button class="btn btn-flat" data-dismiss="modal">Close</button>
              <button class="btn btn-flat btn-primary" data-dismiss="modal">Save</button>
            </div>
          </div>
        </div>
      </div>
    </template>

我有transfer.html和transfer.js

<template name="transfer">
  <!-- Somewhere inside  template --> 
  <a href="#" class="btn small-btn btn-fab reminder-btn" id="lock-pay" data-toggle="tooltip" data-placement="right" title="foo"><i class="fa fa-lock"></i></a>
</template>

Template.transfer.events({
  'click #lock-pay': function(event) {
    event.preventDefault();
    $('#modal').modal('show');
  }
})

我尝试将模态模板放在与我的传输相同的文件中，但这也不起作用

Answer 1

我认为您忘记在 HTML 中的某个位置实际渲染模式模板，请尝试以下操作:

<template name="transfer">
  {{> modal}}
  <a href="#" class="btn small-btn btn-fab reminder-btn" id="lock-pay" data-toggle="tooltip" data-placement="right" title="foo"><i class="fa fa-lock"></i></a>
</template>

如果你想使用 # 引用它，你需要为模态 div 分配一个 id:

<div id="modal" class="modal fade">
  ...
</div>

您应该使用 data-toggle 和 data-target 来打开模式，而不是自己管理点击事件。

<a href="#" data-toggle="modal" data-target="#modal"></a>