backbone.js - 如何让 twitter bootstrap.modals 与骨干网配合得很好？

Question

作为主题，我已经阅读了关于类似问题的另一个问题： modal-dialog-with-backbone-and-marionette

但我不想引入backbone.marionette我的项目。

我想知道是否还有其他选择？

Answer 1

我通过将div模态对话框的容器放置并清空到页面底部来解决它：

    <!-- Charge -->
    <div id="charge_dialog_container" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    </div>

在模板中定义了对话框的其余部分：

    <script id="charge_dialog_template" type="text/template">
        <div class="modal-header">
            ...
        </div>
        <div class="modal-body">
            ...
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary" data-dismiss="modal"><i class="icon-ok"></i> OK</button>
        </div>
    </script>

在initialize函数中的视图构建过程中，我做了以下modal()事情：

        ChargeView = Backbone.View.extend({
            el: $('#charge_dialog_container'),
            initialize: function() {
                this.render();
                this.$el.modal({'backdrop': 'static'});
            },
            render: function() {
                var template = _.template($('#charge_dialog_template').html());
                this.$el.html(template);
            }
        });