想使用dialog组件，报错，求教。

Question

想使用dialog组件，报错，求教。

Closed this issue 11 years ago · 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"指的是什么东东呢？

Answer 1 · 2013-10-08T10:41:24.000Z

dialog 是依赖于 jquery 的. $ 为 jQuery 的别名, 需要

seajs.config({
    alias: {
      "$": 'jquery/jquery/1.7.2/jquery' // jQuery 所在路径
    }
});

Answer 2 · 2013-10-08T10:45:16.000Z

非常感谢，这个问题已经解决。
又出了一个新的问题报错如下：

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

有点晕菜啊啊。

感觉说明文档还是不够清晰哦。

Answer 3 · 2013-10-08T10:47:16.000Z

麻烦贴下你是怎么初始化 dialog 的代码

Answer 4 · 2013-10-08T10:48:41.000Z

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: '

这是 dialog 容器的内容

'
});
});

Answer 5 · 2013-10-08T10:52:31.000Z

看例子上的初始引用很夸张啊，这么大段的引用都需要？

Answer 6 · 2013-10-08T10:57:19.000Z

受不了你这么对待别人的. 你这贴的什么乱七八糟的代码! 不能排个版吗?? 你是让人给解决问题, 都不好好讲清&写清你的问题. 你贴的这么大堆, 换成你看你晕不晕啊. 这不摆着虐人嘛~

dailog 不就很简单的使用嘛. 不知你们怎么就看不懂文档了呢?!

Answer 7 · 2013-10-08T10:59:12.000Z

哈哈，抱歉啊，初次接触sea.js和aralejs。
那个大段代码是从官方的例子copy过来的。

Answer 8 · 2013-10-08T11:01:40.000Z

以下是我排版后的官方的例子中的引用配置部分的代码：我的意思是都必须配置这么多东西吗？
感觉很多。

(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);

})();

Answer 9 · 2013-10-08T11:15:42.000Z

不需要引这么多的.

引入 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 进行安装

Answer 10 · 2013-10-09T15:53:48.000Z

可以先看看第一个例子 http://aralejs.org/docs/getting-started.html

Answer 11 · 2013-10-12T02:22:07.000Z

哈哈原因在于没有引入seajs-style.js