jquery - 使用主干渲染引导模式

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

谢谢您的帮助！罗伊

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

一个简单的引导模式 -

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

查看文件

/**
 * 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，事件以避免多个实例。
• Bootstrap 模态 HTML 应附加到正文 - 如果不是，您可能会遇到 z-index/backdrop 问题。

Answer 3

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

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

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

Answer 4

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