带有 requireJS 的 bootstrap-sweetalert 显示警告框“无效”

问题描述

我通过 bower 将 bootstrap-sweetalert 安装到我的 webapp 中 -> $ bower install bootstrap-sweetalert

“奇怪的”警报框：

我的 JS 看起来像这样，试图显示来自 bootstrap-sweetalert 的简单消息。

    define(function (require) {

    'use strict';



    var $ = require('jquery');

    var Backbone = require('backbone');

    var _ = require('underscore');

    var html = require('text!./template.html');

    var template = require('util/template');

    var numberFormatter = require('util/formatter/number');



    var swalOnline = require('https://unpkg.com/sweetalert/dist/sweetalert.min.js');

    var swal = require('sweetalert');



    var viewMaker = function (clientId,caseId,periodId,accountingId,eCheck) {

        var view;

        var View = Backbone.View.extend({

            initialize: function () {

                view = this;

            },render: function () {

            template.render(html,{eCheck:eCheck,numberFormatter: numberFormatter,},view.el);



            swal("Message outside button");

            var $saveButton = view.$el.find('button[data-id="savehome-button"]');

                    $saveButton.click(function (event) {

                        // disable native actions on save button click

                        event.preventDefault();

                        swal("Message inside button");

                    });

                return view;

            }

        });

        view = new View();

        return view;

    };
    return viewMaker;
});

requirejs.config:

requirejs.config({
    baseUrl: 'spa',paths: {
        'backbone': 'bower_components/backbone/backbone','jquery': 'bower_components/jquery/dist/jquery','text': 'bower_components/text/text','underscore': 'bower_components/underscore/underscore','bootstrap': 'bower_components/bootstrap/dist/js/bootstrap','moment': 'bower_components/moment/moment','datepicker': 'bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker','slider': 'bower_components/bootstrap-slider/bootstrap-slider','leaflet': 'bower_components/leaflet/dist/leaflet','leaflet.markercluster': 'bower_components/leaflet.markercluster/dist/leaflet.markercluster','sweetalert': 'bower_components/bootstrap-sweetalert/dist/sweetalert.min'
    },shim: {
        'underscore': {
            'exports': '_'
        },'backbone': {
            'deps': [ 'underscore' ],'exports': 'Backbone'
        },'bootstrap': {
            deps: [ 'jquery' ]
        },'datepicker': {
            'deps': [ 'jquery' ],'exports': '$.fn.datepicker'
        },'leaflet.markercluster': {
            'deps': ['leaflet']
        }
    }
});

require(['app'],function (app) {
    require(['bower_components/bootstrap-datepicker/js/locales/bootstrap-datepicker.sv'],function () {
        app.start();
    });
});

奇怪的是，如果我使用 swalOnline 变量来代替它工作正常。其中使用了 require('https://unpkg.com/sweetalert/dist/sweetalert.min.js');

解决方法

尝试将 bootstrap-sweetalert 中的 css 包含到您的代码中，错误就会消失。

附言在示例代码中，您使用了两个不同的包。所以它有效。 通过 cdn 添加到代码中的包是原始的 sweetalert 包（swalOnline 变量）。通过 bower 添加的一个是 bootstrap-sweetalert（swal 变量）。