Question

我正在尝试为每个帖子生成一个模态，以便每个帖子都有一个包含帖子内容的模式（最终是评论）。单击注释链接时，将显示模式。问题是我必须为每个帖子创建一个bootstrap模态块，所以我决定在我的骨干模板中最容易做到这一点。为什么这不起作用？

这是我的代码：

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

应用程序/资产/ Javascript角/路由器/ 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-（posts id）”

非常感谢任何帮助！

Answer 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();

他的解释是，

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

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

Backbone，模板内的Bootstrap模态未显示

应用程序/资产/模板/帖/ index.jst.eco

应用程序/资产/ Javascript角/路由器/ posts_router.js.coffee

1 个答案: