Question

我想通过双击行中的元素来打开bootstrap模态，以便能够编辑它。

让我们说当我双击Name（Nuriddinhon）时，模态视图应该用Nuriddinhon打开，我应该可以编辑这个名字。

这是我的js文件：

Template.projectRow.events({
    'dblclick .projectRow':function(evt,tmpl) {
        Session.set('editing_project', tmpl.data._id);
    //what should be here?
    }
});

和html文件：

<template name="projects">

{{>projectForm}}

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">Project
                <small>List</small>
            </h1>
            <button class="btn btn-lg btn-success addProject" data-toggle="modal" data-target="#myModal" type="button">Add project</button>
        </div>
        <table class="table table-bordered table-hover table-stiped">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Client</th>
                    <th>Due Date</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
            {{#each projectList}}
            {{>projectRow}}
            {{/each}}
            </tbody>
        </table>
    </div>
</div>

<template name="projectRow">
<tr class="projectRow">
    <td>{{name}}</td>
    <td>{{client}}</td>
    <td>{{formatDate duedate}}</td>
    <td>{{status}}</td>
</tr>

<template name="projectForm">
  <div class="container">
      <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
          <div class="modal-dialog" role="document">
              <div class="modal-content">
                  <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      <h4 class="modal-title" id="myModalLabel">Add project</h4>
                  </div>
                  <div class="modal-body">
                      <label for="name">Name:</label><input type="text" name="name" id="name" class="form-control name" value="{{project.name}}" title="" required="" >
                      <label for="client">Client:</label><input type="text" name="client" id="client" class="form-control client" value="{{project.client}}" title="" required="" >
                      <label for="status">Status:</label>
                      <select class="form-control status" name="status" id="status">
                          <option value="OnHold">On Hold</option>
                          <option value="Active">Active</option>
                      </select>
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-success save" data-dismiss="modal">Save changes</button>
                      <button type="button" class="btn btn-danger cancel" data-dismiss="modal">Cancel</button>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

我想我可以解释我的愿望，抱歉我的语言错误： - （

Answer 1

您可以使用Blaze.renderWithData方法轻松实现这一目标。

假设您有这样的模板。

<template name="myModalToEdit">
 {{! Modal Content }}
</template>

然后你可以像这样简单地调用这个模态。

Template.projectRow.events({
    'dblclick .projectRow':function(evt,tmpl) {
      dataToModal = {
       id: tmpl.data._id
     };
      Blaze.renderWithData(Template.myModalToEdit, dataToModal, document.body)
    }
});

现在，您需要在.js模板的myModalToEdit内添加onRendered方法中的以下代码。

Templae.myModalToEdit.onRendered(function(){ 
  var tmpl = this;

  $('#modal-selector').modal(); //Launch the modal

  console.log(tmpl.data); // should the print the data passed on dataToModal Variable
});

Answer 2

而不是data-toggle="modal"将其更改为：

data-toggle="dbl-modal"

在jQuery中，如果你有一个document s ready函数，请添加：

$(document).on('dblclick', '[data-toggle="dbl-modal"]', function (e) {
  e.preventDefault();
  $($(this).attr("href")).modal("show");
});

让我知道它是否有效。您可以将其添加到bootstrap.min.js或自定义JavaScript文件中。

工作小提琴

$(document).on('dblclick', '[data-toggle="dbl-modal"]', function (e) {
  e.preventDefault();
  $($(this).attr("href")).modal("show");
});

body {padding: 25px;}

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="modal fade" tabindex="-1" role="dialog" id="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<a href="#modal" class="btn btn-primary" data-toggle="dbl-modal">Double Click</a>
<a href="#modal" class="btn btn-primary" data-toggle="modal">Click</a>

如何通过双击“在流星”中编辑行中的元素

2 个答案: