模板中的骨干、引导模式未显示答案

【问题标题】：Backbone, Bootstrap modal within template not showing模板中的骨干、引导模式未显示
【发布时间】：2012-11-24 23:05:42
【问题描述】：

我正在尝试为我的每个帖子生成一个模态，以便每个帖子都有一个包含帖子内容（最终是 cmets）的模态。单击评论链接时，将出现模式。问题是我必须为每个帖子创建一个引导模式块，所以我决定在我的主干模板中这样做是最简单的。为什么这不起作用？

这是我的代码：

app/assets/templates/posts/index.jst.eco

<% for post in @posts.models: %>
<tbody><td>
<%= post.get('content') %>
</td></tbody>
<tr><td>
<a href="#<%= post.get('id') %>">Comment</a>
</td></tr>
<div class="modal" id="post-<%= post.get('id')%>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<%= post.get('content') %>
</div>
</div>
<% end %>

app/assets/javascripts/routers/posts_router.js.coffee

class Voice.Routers.Posts extends Backbone.Router
        routes:
                '': 'index'
                ':id': 'show'
        initialize: ->
                @collection = new Voice.Collections.Posts()
                @collection.fetch()
        index: ->
                view = new Voice.Views.PostsIndex(collection: @collection)
                $('#container').html(view.render().el)
        show: (id) ->
                $("#post-#{id}").modal('show')

js 控制台没有错误，模态框似乎没有出现。每个帖子都有一个模态块，其 html id 字段等于“post-(the posts id)”

非常感谢任何帮助！

【问题讨论】：

检查是$("#post-#{id}")还是$("#post-{id}")？
是的，我确定，主干运行正常，但我的引导模式运行不正常。这是一个针对引导模式在主干视图使用的生态模板中起作用的问题
Using bootstrap-modal as Backbone.js view的可能重复

标签： jquery ruby-on-rails-3 backbone.js twitter-bootstrap eco

【解决方案1】：

这听起来与许多关于 Bootstrap 模态和使用 Backbone 的 SO 问题非常相似。查看 Dereck Bailey 提供的此解决方案，

http://lostechies.com/derickbailey/2012/04/17/managing-a-modal-dialog-with-backbone-and-marionette/

// the template
<script id="modal-view-template" type="text/html">
  <div class="modal-header">
    <h2>This is a modal!</h2>
  </div>
  <div class="modal-body">
    <p>With some content in it!</p>
  </div>
  <div class="modal-footer">
    <button class="btn">cancel</button>
    <button class="btn-default">Ok</button>
  </div>
</script>

// the html has only one modal div
<div id="modal"></div>


// inside your show router function
var view = new MyView();
view.render();

var $modalEl = $("#modal");

$modalEl.html(view.el);
$modalEl.modal();

他的解释是，

人们在使用模态时遇到的问题的核心对话框是模态插件删除了包装的DOM元素模态的，来自 DOM。它通常被添加到一些特殊的控股模态插件可以保证元素不会的位置在打开模式对话框之前可见。我过度概括了这有点，但许多模态对话框以这种方式或在类似的方式。

这通常导致的问题是 Backbone 视图会丢失它是当 DOM 元素被移动时的事件处理模态对话框。当模态对话框从 DOM，events 配置丢失，因为 DOM 元素有被移动或从 DOM 中删除，jQuery 不得不放手事件。当 el 重新添加到 DOM 以将其显示为 modal，则events 不会重新附加。

【讨论】：