2

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

这是我的代码：

应用程序/资产/模板/帖子/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 %>

应用程序/资产/javascripts/路由器/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)”

任何帮助深表感谢！

4

1 回答 1

4

这听起来与许多关于 Bootstrap modals 和使用 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 元素。它通常被添加到一些特殊的保存位置，模态插件可以保证在打开模态对话框之前元素不可见。我对此进行了过度概括，但许多模式对话框以这种方式或类似方式工作。

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

于 2012-11-25T07:47:28.387 回答