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

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 コンソールにエラーはなく、モーダルが表示されないようです。各投稿には、"post-(投稿 ID)" に等しい html id フィールドを持つモーダル ブロックがあります。

どんな助けでも大歓迎です！

4

1 に答える 1

4

これは、Bootstrap モーダルとバックボーンの使用に関する多くの 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 要素がモーダル ダイアログによって移動されると、バックボーン ビューがそのイベント処理を失うことです。モーダル ダイアログelが DOM からビューを削除するeventsと、DOM 要素が DOM から移動または削除され、jQuery がイベントを手放さなければならなかったため、構成が失われます。elをモーダルとして表示するために DOM に再追加すると、 は再接続さeventsれません。

于 2012-11-25T07:47:28.387 に答える