将数据传递给引导模式

Question

我正在尝试使用 twitter bootstrap 创建一个简单的模式。该模式的功能是获取单击的链接的名称，并将该名称用作标题。每个名称都在 Django 数据库中。我点击此链接以供参考：Passing data to a bootstrap modal

#Button to toggle modal
<a data-toggle="modal" data-id="{{ name }}" title="Add this item" class="open-  AddBookDialog " href="#addBookDialog">{{ name }}</a><br />

#Modal
<div class="modal hide fade" id="addBookDialog">
     <div class="modal-header">
        <button class="close" data-dismiss="modal">×</button>

     </div>
     <div class="modal-body">
         <input type="text" name="nameId" id="nameId" />
         <p>some content</p>

     </div>
</div>

#JavaScript
 <script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
    var myNameId = $(this).data('id');
    $("modal-body #nameId").val( myNameId );

    });
</script>

上面所做的是显示一个文本框，其中包含字符名称。我想要的是将名称作为标题，而不是在文本框中。当我删除文本框并放置一个具有相同 id 和名称的标题标签时，什么都不会显示。有没有办法完成这个任务。

Answer 1

标题是模式中的第一个 h3。 因此，您需要在“.modal-header”下添加一个带有 id 的 h3 元素，并设置该元素的 .html()。 :)

在这里查看参考：http://twitter.github.io/bootstrap/javascript.html#modals

代码如下：

#Modal
<div class="modal hide fade" id="addBookDialog">
     <div class="modal-header">
        <button class="close" data-dismiss="modal">×</button>
        <h3 class="hdrtitle">This is the header</h3>
     </div>
     <div class="modal-body">
         <input type="text" name="nameId" id="nameId" />
         <p>some content</p>

     </div>
</div>

使用如下代码：

$('.modal .hdrtitle').html('This is the header');

然后显示：

$('.modal').modal('toggle');

有效。

Answer 2

一次性方式

如果这是您唯一需要在您的网站/应用程序中执行 UI 绑定行为的情况，请执行以下操作：

$('.header-link').click(function(e) {
   $('.modal-header h4').html($(e.target).html())
})

CodePen Demo

这只会获取链接本身中的文本（实际上是 HTML）并将其放在标题中。

使用库

如果您打算在应用程序的更多部分中使用这些很酷的技巧，请考虑使用 Angular JS 或 Knockout 等 UI 绑定库。通过这种方式，您可以通过事件 data-bind 部分 UI。

Answer 3

我找到了答案。感谢@PaoloCasciello 的布局。

而不是 javascript 中的 .on 函数，它确实需要是 .html。所以这就是最终代码的样子。

<!-- Modal -->
<div class="modal hide fade" id="addBookDialog">
     <div class="modal-header">
         <button class="close" data-dismiss="modal">×</button>
         <h3 id="nameId" />

      </div>
      <div class="modal-body">
         <p>some content</p>
      </div>
 </div>


<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
 var myNameId = $(this).data('id');
 var myNameDescription = $(this).data('description');
 $(".modal-header #nameId").html( myNameId );