使用Backbone呈现Bootstrap Modal

Question

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

视图：

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。

感谢您的帮助！ Roy

- royB

---

问题是来自模板还是模态方法？ - Loamhoof

Answer 1

最好创建一个单独的类来保存所有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
    }
 });

Handlebars模板

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

- Andrew Shatnyy

---

这对于从父视图显示我的模态视图非常有效。然而，我在拆除方面遇到了麻烦。似乎“hidden”事件从未被调用。我可以通过捕获关闭按钮的点击事件来显式调用该函数，但这样就失去了漂亮的淡出效果。有什么建议吗？ - SeanK

如果您使用的是Bootstrap 3，请确保您的视图监听“hidden.bs.modal”事件。伙计们在Bootstrap的新版本中更改了事件的名称。http://getbootstrap.com/javascript/#modals - Andrew Shatnyy

我在这一行代码 this.$el.modal('show'); 出现了一个错误，错误信息是 Object [object Object] has no method 'modal'。你有什么想法吗？ - Shubh

将数据传递到模板是在渲染方法中完成的，因此您可以构造 data 对象并将其传递给模板函数。var data = {prop1: '属性'};this.$el.html(template(data)); - Andrew Shatnyy

@vini，你有更新的underscore版本。我已经更新了代码，让它可以在两个版本上工作。参见http://underscorejs.org/#bindAll - Andrew Shatnyy

Answer 2

一个简单的Bootstrap模态框 -

我们可以扩展这个视图以添加更多功能。同时，我们可以在初始化时向视图传递数据。

视图文件

/**
 * 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');

Handlebar 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和事件，以避免多个实例。
• Bootstrap模态框HTML应该附加到body上 - 如果不这样做，您可能会面临z-index /背景幕布问题。

- Mohan Dere

---

感谢分享，@mohan。我想知道如何在模态框中仅在单击“确定”时执行操作（假设模态框有两个按钮 - [确定，取消]）。 - Prabakaran

Answer 3

看起来你从未将它添加到页面中。

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

我假设bootstrap-modal和大多数jQuery插件一样，需要在调用之前将HTML放在页面上。

- Paul Hoenecke

---

我本以为这个方法会做到这一点。另外，“模态框已加载但我只得到一个空的div”让我想它被添加了，但是为空的。 - Loamhoof

Answer 4

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

- Eva M