jQuery 使用主干渲染引导模式

Rendering bootstrap modal using backbone

提问by royB

I think a code will explain better my problem: the View:

我认为代码可以更好地解释我的问题：视图：

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;

  }

});

when instantiating:

实例化时：

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

The modal is loaded but i get only an empty div

模式已加载，但我只得到一个空的 div

Thanks for the help! Roy

谢谢您的帮助！罗伊

回答by Andrew Shatnyy

It always better to create a separate class that holds all Modal logic and then call it from the master view.

最好创建一个单独的类来保存所有模态逻辑，然后从主视图中调用它。

Try using this approach.

尝试使用这种方法。

Modal JS

模态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
    }
 });

Handlebars template

车把模板

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

Parent View// on button click following fired

父视图// 在按钮点击以下被触发

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

// Modal view automatically bound to the body and removes itself on hidden;

回答by Mohan Dere

A simple bootstrap modal -

一个简单的引导模式 -

We can extend this view to add more functionality to it. Also we can pass data to view on init.

我们可以扩展此视图以为其添加更多功能。我们也可以传递数据以在 init 上查看。

View file

查看文件

/**
 * 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();
  },

});

To open modal -

打开模态 -

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

Handlebar template for v3 -

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>

• On modal hidden - we have to remove modal html, events to avoid multiple instances.
• Bootstrap modal HTML should be appended to body - if not you may face issues with z-index/backdrop.

• 模式隐藏 - 我们必须删除模式 html，事件以避免多个实例。
• Bootstrap modal HTML 应该附加到 body - 如果没有，你可能会遇到 z-index/backdrop 的问题。

回答by Paul Hoenecke

Looks like you are never adding it to the page.

看起来您从未将其添加到页面中。

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

I am assuming bootstrap-modal, like most jquery plugins, requires the html to be on the page before calling it.

我假设 bootstrap-modal 与大多数 jquery 插件一样，要求 html 在调用之前位于页面上。

回答by Eva M

Try removing the fade and hide classes from your modal view.

尝试从模态视图中删除淡入淡出和隐藏类。