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>

在流星模板中使用模态

1 个答案: