渲染使用骨干引导模式(Rendering bootstrap modal using backbon

我认为，一个代码将更好地解释我的问题：查看：

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

谢谢您的帮助！ 罗伊

Answer 1:

它总是最好创建包含所有模态逻辑一个单独的类，然后从主视图调用它。

尝试使用这种方法 。

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;

Answer 2:

一个简单的引导模式 -

我们可以扩展这种观点更多的功能添加到它。 此外，我们可以通过数据来查看初始化。

查看文件

/**
 * ModalView
 * @version 0.0.1
 */
var ModalView = Backbone.View.extend({

  tpl: JST['modal-tpl'],
  className: 'modal-view',
  events: {
    'evt:show': 'show',
    'evt:hide': 'hide',
  },
  initialize: function(options) {
    this.options = options;
    _.bindAll(this, 'render', 'show', 'hide', 'remove');
    this.render();
  },
  render: function() {

    this.$el.html(this.tpl(this.options));
    this.$el.appendTo('body');
    this.$modal = this.$('.modal');

    this.$modal.on('hidden.bs.modal', _.bind(function() {
      this.close();
    }, this));


  },
  show: function() {
    this.$modal.modal('show');
  },
  hide: function() {
    this.$modal.modal('hide');
  },
  close: function() {
    //unbind events
    this.unbind();
    //Remove html from page
    this.remove();
  },

});

要打开模式 -

//Pass modal data on init
var modal = new ModalView({
  modalContent: 'Hello User!'
});
modal.show();
//modal.trigger('evt:show');

对于V3车把模板 -

<!-- Modal -->
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal-label">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="modal-label">Modal</h4>
      </div>
      <div class="modal-body">
        {{{modalContent}}}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

• 模态隐藏 - 我们必须删除HTML模式，事件以避免多个实例。
• 引导模式HTML应附在身上 - 如果没有你可能会面临用z-index /背景的问题。

Answer 3:

看起来你从来没有将它添加到页面。

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

我假设自举模式，最喜欢的jQuery插件，需要HTML是网页调用它。

Answer 4:

尝试从你的语气视图中删除淡出和隐藏类。

文章来源: Rendering bootstrap modal using backbone