在流星模板中使用模态

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>