骨干网，模板中的引导模式不显示 [英] Backbone, Bootstrap modal within template not showing

问题描述

我试图为每个我的职位的模式，使每个岗位有一个包含帖子内容模态（最终评论）。当点击评论链接模态出现。事情是我必须为每一个职位的自举模式块，所以我决定这将是最容易做这在我的骨干模板。为什么不是这方面的工作？

I am trying to generate a modal for each of my posts so that each post has a modal containing the post content(and eventually comments). When the comment link is clicked the modal will appear. The thing is I have to create a bootstrap modal block for each post so i decided it would be easiest to do this in my backbone template. Why isn't this working?

下面是我的code：

<% 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 %>

应用程序/资产/ Java脚本/路由器/ 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字段等于一个模式块后（职位编号）

There are no errors in the js console, the modals just don't seem to appear. each post has a modal block with an html id field equal to "post-(the posts id)"

任何帮助很多AP preciated！

Any help is much appreciated!

推荐答案

这听起来非常相似，很多在引导情态动词使用骨干上的问题。从检出德雷克贝利，

This sounds very similar to a lot of SO questions on Bootstrap modals and using Backbone. Checkout this solution from Dereck Bailey,

<一个href=\"http://lostechies.com/derickbailey/2012/04/17/managing-a-modal-dialog-with-backbone-and-marionette/\" rel=\"nofollow\">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。它通常被添加到一些专用保持
  位置，模态插件可以保证元素将不会
  直到打开模态对话框可见。我过度泛化
  这一点，但许多模式对话框以这种方式工作或在
  类似的方式。

The core of the problem that people run in to when using a modal dialog is that the modal plugin removes the DOM element that wraps the modal, from the DOM. It usually gets added to some special holding location where the modal plugin can guarantee that the element won’t be visible until the modal dialog is opened. I’m over-generalizing this a bit, but many of the modal dialogs work this way or in a similar manner.

这通常会导致的问题是，一个骨干视图将失去
  这是事件处理时的DOM元素得到了搬来搬去
  模态对话框。当模态对话框中删除该视图的报从
  DOM，配置丢失，因为DOM元素具有事件
  被移动或从DOM和jQuery去除不得不让的去
  事件。当报重新加入到DOM显示它作为一个
  模式的话，事件不重新连接。

The problem that this usually causes is that a Backbone view will lose it’s event handling when the DOM element gets moved around by the modal dialog. When the modal dialog removes the view’s el from the DOM, the events configuration is lost because the DOM element has been moved or removed from the DOM and jQuery had to let go of the events. When the el is re-added to the DOM for displaying it as a modal, then, the events are not re-attached.

这篇关于骨干网，模板中的引导模式不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！