我通过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');
1条答案
按热度按时间3bygqnnd1#
尝试将 bootstrap-sweetalert 中的 css 包含到您的代码中,错误就会消失。
另外,在示例代码中,您使用了两个不同的包。所以它可以正常工作。通过cdn添加到代码中的包是原始的 sweetalert 包(swalOnline变量)。通过bower添加的包是 bootstrap-sweetalert(swal变量)。