想使用dialog组件,报错,求教。
Closed this issue · 11 comments
求教 ,报错如下:
GET http://localhost:8080/exam/static/script/sea/sea-modules/$.js 404 (Not Found) sea-debug.js:705
c sea-debug.js:705
e.load sea-debug.js:600
a sea-debug.js:431
f.onload.f.onerror.f.onreadystatechange sea-debug.js:697
Uncaught TypeError: object is not a function widget.js:1
(anonymous function) widget.js:1
e.exec sea-debug.js:801
b sea-debug.js:774
(anonymous function) widget.js:1
e.exec sea-debug.js:801
b sea-debug.js:774
(anonymous function) overlay.js:1
e.exec sea-debug.js:801
b sea-debug.js:774
(anonymous function) dialog.js:1
e.exec sea-debug.js:801
d.callback sea-debug.js:4
e.onload sea-debug.js:608
e.onload sea-debug.js:641
e.onload sea-debug.js:641
e.load sea-debug.js:576
a sea-debug.js:431
f.onload.f.onerror.f.onreadystatechange sea-debug.js:697
$.js是什么东东呢?
dialog-debug.js中如下代码:
var $ = require("$-debug"), Overlay = require("arale/overlay/1.1.3/overlay-debug"), mask = require("arale/overlay/1.1.3/mask-debug"), Events = require("arale/events/1.1.0/events-debug"), Templatable = require("arale/templatable/0.9.1/templatable-debug");
"$-debug"指的是什么东东呢?
dialog 是依赖于 jquery 的. $ 为 jQuery 的别名, 需要
seajs.config({
alias: {
"$": 'jquery/jquery/1.7.2/jquery' // jQuery 所在路径
}
});
非常感谢,这个问题已经解决。
又出了一个新的问题报错如下:
Uncaught TypeError: Cannot read property 'template' of null dialog.js:1
(anonymous function) dialog.js:1
e.exec sea-debug.js:801
b sea-debug.js:774
(anonymous function) dialog.js:1
e.exec sea-debug.js:801
d.callback sea-debug.js:4
e.onload sea-debug.js:608
e.onload sea-debug.js:641
e.onload sea-debug.js:641
e.load sea-debug.js:576
a sea-debug.js:431
f.onload.f.onerror.f.onreadystatechange sea-debug.js:697
有点晕菜啊啊。
感觉说明文档还是不够清晰哦。
麻烦贴下你是怎么初始化 dialog 的代码
seajs.config({
plugins: ['shim'],
base: "${ctx}/static/script/sea/sea-modules/",
alias: {
"$": "jquery/jquery/1.10.1/jquery.js",
"jquery": "jquery/jquery/1.10.1/jquery.js"
}
});
seajs.use(['arale/dialog/1.2.3/dialog','$'], function(Dialog,$) {
var o = new Dialog({
trigger: '#deleteButton',
content: '
});
});
看例子上的初始引用很夸张啊,这么大段的引用都需要?
<script> (function() { var query = location.search.substring(1).split('&'); var srcdir = 'src'; if (contain(query, 'dist')) { srcdir = 'dist'; seajs.use("../dist/confirmbox.js"); seajs.use("../dist/dialog.js"); } else if (contain(query, 'cov')) { srcdir = 'src-cov'; } seajs.config({ alias: { "$": 'jquery/jquery/1.7.2/jquery', "jquery": 'jquery/jquery/1.7.2/jquery', "jquery-debug": 'jquery/jquery/1.7.2/jquery-debug', expect: "gallery/expect/0.2.0/expect", puerh: "popomore/puerh/0.1.0/puerh", handlebars: "gallery/handlebars/1.0.2/handlebars", sinon: "gallery/sinon/1.6.0/sinon" }, map: [function(uri) { // resolve id var m = uri.match(/arale\/dialog\/1.2.3\/(.*)/); if (m) { return resolve(m[1]); } return uri; }, function(uri) { var m = uri.match(/([A-Za-z\-]+)\/[A-Za-z\-]+\/[\.0-9]+\/.+/); if (m && !/seajs|jquery|gallery|arale|alice/.test(m[1])) { return 'http://yuan.alipay.im/assets/' + m[0]; } return uri; }], comboExcludes: {test: function(uri) { return uri.indexOf('http://assets.spmjs.org') === -1; }} }); function resolve(file) { if (contain(query, 'debug')) { if (file.indexOf('-debug') === -1) { file = file.replace(/\.(\w+)$/, '-debug.$1'); } } return seajs.resolve("../" + srcdir + "/" + file + '#'); } function contain(arr, value) { for (var i in arr) { if (arr[i] === value) { return true; } } return false; } seajs.config({ alias: {"overlay":"arale/overlay/1.1.3/overlay","mask":"arale/overlay/1.1.3/mask","easing":"arale/easing/1.0.0/easing","events":"arale/events/1.1.0/events","templatable":"arale/templatable/0.9.1/templatable"}}); seajs.use([]); seajs.config({alias: { "$-debug": 'jquery/jquery/1.7.2/jquery-debug' ,"confirmbox": resolve("confirmbox.js") ,"dialog.css": resolve("dialog.css") ,"dialog": resolve("dialog.js") }}); // 加载依赖的 css 文件 var cssArray = []; cssArray.push('arale/overlay/1.1.3/overlay'); cssArray.push('arale/overlay/1.1.3/mask'); cssArray.push('arale/easing/1.0.0/easing'); cssArray.push('arale/events/1.1.0/events'); cssArray.push('arale/templatable/0.9.1/templatable'); for (var i=0; i受不了你这么对待别人的. 你这贴的什么乱七八糟的代码! 不能排个版吗?? 你是让人给解决问题, 都不好好讲清&写清你的问题. 你贴的这么大堆, 换成你看你晕不晕啊. 这不摆着虐人嘛~
dailog 不就很简单的使用嘛. 不知你们怎么就看不懂文档了呢?!
哈哈 ,抱歉啊,初次接触sea.js和aralejs。
那个大段代码是从官方的例子copy过来的。
以下是我排版后的官方的例子中的引用配置部分的代码:我的意思是都必须配置这么多东西吗?
感觉很多。
(function() {
var query = location.search.substring(1).split('&');
var srcdir = 'src';
if (contain(query, 'dist')) {
srcdir = 'dist';
seajs.use("../dist/confirmbox.js");
seajs.use("../dist/dialog.js");
} else if (contain(query, 'cov')) {
srcdir = 'src-cov';
}
seajs.config({
alias : {
"$" : 'jquery/jquery/1.7.2/jquery',
"jquery" : 'jquery/jquery/1.7.2/jquery',
"jquery-debug" : 'jquery/jquery/1.7.2/jquery-debug',
expect : "gallery/expect/0.2.0/expect",
puerh : "popomore/puerh/0.1.0/puerh",
handlebars : "gallery/handlebars/1.0.2/handlebars",
sinon : "gallery/sinon/1.6.0/sinon"
},
map : [ function(uri) {
// resolve id
var m = uri.match(/arale\/dialog\/1.2.3\/(.*)/);
if (m) {
return resolve(m[1]);
}
return uri;
}, function(uri) {
var m = uri.match(/([A-Za-z\-]+)\/[A-Za-z\-]+\/[\.0-9]+\/.+/);
if (m && !/seajs|jquery|gallery|arale|alice/.test(m[1])) {
return 'http://yuan.alipay.im/assets/' + m[0];
}
return uri;
} ],
comboExcludes : {
test : function(uri) {
return uri.indexOf('http://assets.spmjs.org') === -1;
}
}
});
function resolve(file) {
if (contain(query, 'debug')) {
if (file.indexOf('-debug') === -1) {
file = file.replace(/\.(\w+)$/, '-debug.$1');
}
}
return seajs.resolve("../" + srcdir + "/" + file + '#');
}
function contain(arr, value) {
for ( var i in arr) {
if (arr[i] === value) {
return true;
}
}
return false;
}
seajs.config({
alias : {
"overlay" : "arale/overlay/1.1.3/overlay",
"mask" : "arale/overlay/1.1.3/mask",
"easing" : "arale/easing/1.0.0/easing",
"events" : "arale/events/1.1.0/events",
"templatable" : "arale/templatable/0.9.1/templatable"
}
});
seajs.use([]);
seajs.config({
alias : {
"$-debug" : 'jquery/jquery/1.7.2/jquery-debug',
"confirmbox" : resolve("confirmbox.js"),
"dialog.css" : resolve("dialog.css"),
"dialog" : resolve("dialog.js")
}
});
// 加载依赖的 css 文件
var cssArray = [];
cssArray.push('arale/overlay/1.1.3/overlay');
cssArray.push('arale/overlay/1.1.3/mask');
cssArray.push('arale/easing/1.0.0/easing');
cssArray.push('arale/events/1.1.0/events');
cssArray.push('arale/templatable/0.9.1/templatable');
for ( var i = 0; i < cssArray.length; i++) {
if (cssArray[i].indexOf('.css') < 0) {
cssArray.splice(i, 1);
}
}
seajs.use(cssArray);
})();
不需要引这么多的.
- 引入 seajs.
- 设置 alias
seajs.config({
alias : {
"$" : 'jquery/jquery/1.7.2/jquery',
"$-debug" : 'jquery/jquery/1.7.2/jquery-debug'
}
});
- 初始化 dialog
seajs.use(['arale/dialog/1.2.3/dialog'], function(Dialog) {
new Dialog({
trigger: '#example1',
height: 400,
content: '#example2'
});
});
- 请确保 dialog 及其依赖模块都能正常访问到, 你本地没有的话, 通过 spm install 进行安装
可以先看看第一个例子 http://aralejs.org/docs/getting-started.html
哈哈 原因在于没有引入seajs-style.js