9

コードが私の問題をよりよく説明すると思います: ビュー:

App.Views.ErrorModal = Backbone.View.extend({
  template: window.template('errorModal'),

  render: function(){
    this.$el.html(this.template(this.model.toJSON()));

    this.$("#errorApproveModal").modal({
        keyboard: true
    });

    return this;

  }

});

インスタンス化時:

 var error = new App.Models.Errors({title: "Exporting Error", content: "Error"});
 var errorModal = new App.Views.ErrorModal({model: error});
 errorModal.render();

モーダルはロードされていますが、空の div しか取得できません

助けてくれてありがとう！ロイ

4

4 に答える 4

21

すべての Modal ロジックを保持する別のクラスを作成し、それをマスター ビューから呼び出すことをお勧めします。

このアプローチを試してみてください。

モーダル JS

var BaseModalView = Backbone.View.extend({

    id: 'base-modal',
    className: 'modal fade hide',
    template: 'modals/BaseModal',

    events: {
      'hidden': 'teardown'
    },

    initialize: function() {
      _.bindAll(this, 'show', 'teardown', 'render', 'renderView');
      this.render();
    },

    show: function() {
      this.$el.modal('show');
    },

    teardown: function() {
      this.$el.data('modal', null);
      this.remove();
    },

    render: function() {
      this.getTemplate(this.template, this.renderView);
      return this;
    },

    renderView: function(template) {
      this.$el.html(template());
      this.$el.modal({show:false}); // dont show modal on instantiation
    }
 });

ハンドルバー テンプレート

<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Modal title</h4>
    </div>
    <div class="modal-body">
      ...
    </div>
    <div class="modal-footer">
      <a href="#" class="btn">Close</a>
      <a href="#" class="btn btn-primary">Save changes</a>
    </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

親ビュー // ボタンのクリックで次の起動

modalView = new BaseModalView();
modalView.show();

// Modal view automatically bound to the body and removes itself on hidden;
于 2013-07-31T22:51:36.830 に答える
0

ページに追加していないようです。

var errorModal = new App.Views.ErrorModal({model: error});
$('#my-div').html(errorModal.el);
errorModal.render();

ほとんどのjqueryプラグインと同様に、ブートストラップモーダルでは、呼び出す前にhtmlがページ上にある必要があると想定しています。

于 2013-04-18T15:15:18.400 に答える
0

モーダル ビューからフェード クラスと非表示クラスを削除してみてください。

于 2015-08-26T00:42:39.853 に答える