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

zsbz8rwp  于 2022-11-10  发布在  Bootstrap
关注(0)|答案(1)|浏览(186)

我通过bower命令-〉$ bower install bootstrap-sweetalert〈-将bootstrap-sweetalert安装到我的Web应用程序中,并配置requireConfig.js使require侦听“sweetalert”。当调用时,无论我试图从bootstrap-sweetalert使用什么函数,DOM会在页面底部显示一个警告框,其中显示“无效”并带有一个输入字段。这似乎是某种默认警报,我不知道我做错了什么。
“奇怪”的警报框:

我的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');

3bygqnnd

3bygqnnd1#

尝试将 bootstrap-sweetalert 中的 css 包含到您的代码中,错误就会消失。
另外,在示例代码中,您使用了两个不同的包。所以它可以正常工作。通过cdn添加到代码中的包是原始的 sweetalert 包(swalOnline变量)。通过bower添加的包是 bootstrap-sweetalert(swal变量)。

相关问题