使用 Backbone 启动 Bootstrap 模式

Question

使用 Backbone 启动 Bootstrap 模式已被证明是一个巨大的痛苦。

这是我的 HTML 文件中的内容：

<body>
<div id="teamSnapImportDiv"></div>
<script>

    function importFromTeamSnap(event) {
        event.preventDefault();
        alert('agegage');
        var aimportTeamSnapView = new importTeamSnapView({el: $("#teamSnapImportDiv")});
        var rendered = aimportTeamSnapView.render();
        //$(rendered.el).appendTo(this.$el).hide().fadeIn().slideDown();
    };

</script>


<script type="text/html" id="teamsnap-import-template">

        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                        <h4 class="modal-title">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        <p>One fine body…</p>
                    </div>
                    <div class="modal-footer">
                        <button id="cancelTeamSnapImport" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button id="confirmTeamSnapImport" type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->


</script>
</body>

这是我的 Backbone 观点：

var importTeamSnapView = Backbone.View.extend({
    tagName: "div",
    id: 'teamSnapImportDiv',
    initialize: function() {
    },
    render: function (){
        var importTeamSnapTemplate = document.getElementById('teamsnap-import-template').innerHTML;
        this.$el.html(_.template(importTeamSnapTemplate)());
    }
});

我到底需要做什么才能完成这项工作？我可以让其他东西工作，但模态的东西不起作用。其他示例没有说明需要完成什么或为什么。

Answer 1

尝试使用 this approach。

模态JS

var BaseModalView = Backbone.View.extend({

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

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

    initialize: function() {
      _(this).bindAll();
      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

这非常适合解决问题。

http://awkward.github.io/backbone.modal/

不幸的是，它是另一个图书馆，但它确实有效。

使用 Backbone 启动 Bootstrap 模式

Launching Bootstrap modal with Backbone

modal-dialog

backbone.js

twitter-bootstrap