首页 > Marionette 无法显示bootstrap的modal

Marionette 无法显示bootstrap的modal

如题,无法显示modal, 如下是代码,麻烦帮我看看

HTML Region 定义:

<div class="modal fade" id="dialog" tabindex="-1" role="dialog" aria-hidden="true"> </div>

模板



<div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close dismiss" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModalLabel"><span class="glyphicon glyphicon-<%= icon %>"></span> <%= title %></h4> </div> <div class="modal-body"> <%= message %> </div> <div class="modal-footer"> <button type="button" class="btn btn-warning btn-sm confirm_no" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button> <button type="button" class="btn btn-success btn-sm confirm_yes" data-dismiss="modal"><span class="glyphicon glyphicon-ok"></span> Yes</button> </div> </div><!-- /.modal-content --> </div> <!-- /.modal-dialog -->

Dialog View

define([
    'marionette'
], function (Marionette) {
    'use strict';

    return Marionette.ItemView.extend({
        events: {
            'click .dismiss': 'dismiss'
        },

        dismiss: function(e) {
            e.preventDefault();
            this.trigger('dialog:close');
        }
    });
});

Region:

define([
    'app',
    'marionette'
], function(app, Marionette){

    return  Marionette.Region.extend({
        onShow: function(view){

            this.listenTo(view, "dialog:close", this.closeDialog);

            var self = this;
            this.$el.modal({
                backdrop: true,
                keyboard: true,
                show: true
            });
        },

        closeDialog: function(){
            this.stopListening();
            this.close();
            this.$el.modal('hide');
        }
    });

});

APP 监听事件:

    app.commands.setHandler("app:dialog:confirm", function(data) {
        require(['views/DialogView', 'models/Dialog', 'tpl!templates/confirmModal.html'],
            function(DialogView, DialogModel, ModalTpl) {

                app.dialog.show(new DialogView({
                    template: ModalTpl,
                    model: new DialogModel(data),
                    events: {
                        'click .dismiss': 'dismiss',
                        'click .confirm_yes': data.confirmYes,
                        'click .confirm_no': data.confirmNo
                    }
                }));
            });
    });
【热门文章】
【热门文章】