Fatal编程技术网
  • javascript/
  • Javascript 如何编写我的小部件而不声明它'；s dojo.ready中的代码

Javascript 如何编写我的小部件而不声明它'；s dojo.ready中的代码

javascript dojo

Javascript 如何编写我的小部件而不声明它'；s dojo.ready中的代码,javascript,widget,dojo,Javascript,Widget,Dojo,使用一些教程，我编写了一个简单的小部件，但它会导致错误“declare customwidget.TestDijit:mixin#0未知”： //test.html <title>Test</title> <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" djConfig="parseOnLoad:true"> </script> <sc

使用一些教程，我编写了一个简单的小部件，但它会导致错误“declare customwidget.TestDijit:mixin#0未知”：

//test.html

<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" djConfig="parseOnLoad:true">
</script>
<script type="text/javascript" src="Test.js"> </script>
<script type="text/javascript">

dojo.require("customwidget.TestWidget");

</script>
</head>
<body>
<div dojoType='customwidget.TestWidget'/>
</body>

<!DOCTYPE html> 
<head>
<title>Test</title>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css"> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css"> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css"> 
<link rel="stylesheet" href="css/layout.css"> 

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" 
    djConfig="parseOnLoad:true, baseUrl: './'">
</script>

<script type="text/javascript">

    dojo.require("customwidget.TestWidget");

</script>
</head>
<body class="claro">
    <div dojoType='js.Test'>
    </div>
</body>
//testdijit.html

<div id="${id}">
<input dojoattachevent="onClick: clickEvent" dojotype="dijit.form.Button" label="Search" />
</div>
test/customwidget/TestWidget.js

dojo.provide('customwidget.TestWidget')
dojo.require('dijit._Widget');
dojo.require('dijit._Templated');
dojo.require("dijit.form.Button");
//dojo.require('dojo.cache');

dojo.declare("customwidget.TestWidget",  [dijit._Widget, dijit._Templated],
{
    templatePath : "",//dojo.cache('customwidget.template', 'testdijit.html'),
    widgetsInTemplate : true,
    lang : 'EN',
    postCreate: function(args, frag)
    {
        this.inherited('postCreate', arguments);
    },
    clickEvent : function()
    {
        alert("Button Click event");
    }
});

dojo.provide('customwidget.TestWidget');

dojo.require('dijit._Widget');
dojo.require('dijit._Templated');
dojo.require("dijit.form.Button");

dojo.declare("customwidget.TestWidget",  [dijit._Widget, dijit._Templated], {
     templateString: "<div>Foobar<br/><button dojoType='dijit.form.Button'>Yeah</button></div>",
     widgetsInTemplate : true
 });
首先有几件事（但我猜这些都是你在这里发帖时的打字错误）

  • dojo.cashe
    应该是
    dojo.cache
  • 您似乎将
    customwidget.TestWidget
    与
    customwidget.TestDijit
  • 如果您想在小部件的模板中使用dijit.form.Button，您必须要求它
现在谈谈更重要的事情。当您使用标记包含js文件时，Dojo不会在执行任何其他操作之前考虑加载需求。这就是为什么会得到未知的mixin，因为在对
dojo.declare
的调用中，类
dijit.\u Templated
尚未加载

但是，如果使用dojo.require加载小部件/模块，dojo会确保Test.js中的需求（所有dojo.require语句）在尝试使用它们之前都已加载完毕。因此，删除Test.js的-tag

现在我们需要告诉dojo.require，在哪里可以找到您的文件。您使用的是来自CDN（googleapis）的dojo，因此默认情况下，dojo将实际尝试加载

"http://ajax.googleapis.com/...../1.6.0/customwidget/TestWidget.js".
那根本不对！将Test.js重命名为TestWidget.js，并将其放入名为customwidget的文件夹中。这是模块路径的Dojo约定。如果您的小部件被称为
customwidget.coolwidgets.TestWidget
，那么它应该位于customwidget/coolwidgets/TestWidget.js中

现在，将此文件夹放在HTML文件旁边。然后将以下内容添加到您的
djConfig
：

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" djConfig="parseOnLoad:true, baseUrl: './' ">
</script>
test.html：

<html>                                                                                                            
  <head>                    
    <link rel="stylesheet"                                                                                           
      href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
        djConfig="parseOnLoad:true,baseUrl: './'"></script>
    <script type="text/javascript">
        dojo.require("customwidget.TestWidget");
    </script>
  </head>
  <body class="claro">
    <div dojoType='customwidget.TestWidget'></div>
  </body>
</html>


require（“customwidget.TestWidget”）；
TestWidget.js

dojo.provide('customwidget.TestWidget')
dojo.require('dijit._Widget');
dojo.require('dijit._Templated');
dojo.require("dijit.form.Button");
//dojo.require('dojo.cache');

dojo.declare("customwidget.TestWidget",  [dijit._Widget, dijit._Templated],
{
    templatePath : "",//dojo.cache('customwidget.template', 'testdijit.html'),
    widgetsInTemplate : true,
    lang : 'EN',
    postCreate: function(args, frag)
    {
        this.inherited('postCreate', arguments);
    },
    clickEvent : function()
    {
        alert("Button Click event");
    }
});

dojo.provide('customwidget.TestWidget');

dojo.require('dijit._Widget');
dojo.require('dijit._Templated');
dojo.require("dijit.form.Button");

dojo.declare("customwidget.TestWidget",  [dijit._Widget, dijit._Templated], {
     templateString: "<div>Foobar<br/><button dojoType='dijit.form.Button'>Yeah</button></div>",
     widgetsInTemplate : true
 });

dojo.provide（'customwidget.TestWidget'）；
require（'dijit._Widget'）；
require（“dijit._模板化”）；
require（“dijit.form.Button”）；
declare（“customwidget.TestWidget”，[dijit.\u Widget，dijit.\u模板化]{
templateString:“Foobar
耶”，
widgetsInTemplate：正确
});
首先有几件事（但我猜这些都是你在这里发帖时的打字错误）

  • dojo.cashe
    应该是
    dojo.cache
  • 您似乎将
    customwidget.TestWidget
    与
    customwidget.TestDijit
  • 如果您想在小部件的模板中使用dijit.form.Button，您必须要求它
现在谈谈更重要的事情。当您使用标记包含js文件时，Dojo不会在执行任何其他操作之前考虑加载需求。这就是为什么会得到未知的mixin，因为在对
dojo.declare
的调用中，类
dijit.\u Templated
尚未加载

但是，如果使用dojo.require加载小部件/模块，dojo会确保Test.js中的需求（所有dojo.require语句）在尝试使用它们之前都已加载完毕。因此，删除Test.js的-tag

现在我们需要告诉dojo.require，在哪里可以找到您的文件。您使用的是来自CDN（googleapis）的dojo，因此默认情况下，dojo将实际尝试加载

"http://ajax.googleapis.com/...../1.6.0/customwidget/TestWidget.js".
那根本不对！将Test.js重命名为TestWidget.js，并将其放入名为customwidget的文件夹中。这是模块路径的Dojo约定。如果您的小部件被称为
customwidget.coolwidgets.TestWidget
，那么它应该位于customwidget/coolwidgets/TestWidget.js中

现在，将此文件夹放在HTML文件旁边。然后将以下内容添加到您的
djConfig
：

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" djConfig="parseOnLoad:true, baseUrl: './' ">
</script>
test.html：

<html>                                                                                                            
  <head>                    
    <link rel="stylesheet"                                                                                           
      href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
        djConfig="parseOnLoad:true,baseUrl: './'"></script>
    <script type="text/javascript">
        dojo.require("customwidget.TestWidget");
    </script>
  </head>
  <body class="claro">
    <div dojoType='customwidget.TestWidget'></div>
  </body>
</html>


require（“customwidget.TestWidget”）；
TestWidget.js

dojo.provide('customwidget.TestWidget')
dojo.require('dijit._Widget');
dojo.require('dijit._Templated');
dojo.require("dijit.form.Button");
//dojo.require('dojo.cache');

dojo.declare("customwidget.TestWidget",  [dijit._Widget, dijit._Templated],
{
    templatePath : "",//dojo.cache('customwidget.template', 'testdijit.html'),
    widgetsInTemplate : true,
    lang : 'EN',
    postCreate: function(args, frag)
    {
        this.inherited('postCreate', arguments);
    },
    clickEvent : function()
    {
        alert("Button Click event");
    }
});

dojo.provide('customwidget.TestWidget');

dojo.require('dijit._Widget');
dojo.require('dijit._Templated');
dojo.require("dijit.form.Button");

dojo.declare("customwidget.TestWidget",  [dijit._Widget, dijit._Templated], {
     templateString: "<div>Foobar<br/><button dojoType='dijit.form.Button'>Yeah</button></div>",
     widgetsInTemplate : true
 });

dojo.provide（'customwidget.TestWidget'）；
require（'dijit._Widget'）；
require（“dijit._模板化”）；
require（“dijit.form.Button”）；
declare（“customwidget.TestWidget”，[dijit.\u Widget，dijit.\u模板化]{
templateString:“Foobar
耶”，
widgetsInTemplate：正确
});
好的，这就很好了。我将删除我的答案。我像你说的那样修改了代码，但出现了错误“拒绝访问受限URI”代码：“1012”，“无法加载'js.Test'；上次尝试的'../customwidget/Test.js'”，“未捕获的异常：无法加载跨域资源：js.Test”。文件夹“customwidget”位于html所在的同一文件夹中。@Kirill Lykov是名为Test还是TestWidget的小部件？文件名必须相同（仅在结尾使用.js）。你需要什么？是否确实已将baseUrl添加到djConfig？@Frode是，文件夹名为customwidget，文件名为Test.js，类名为customwidget.Test。djConfig已经被修改。为了解决这个问题，我试图在本地复制dojo，但这导致了其他错误。@Kirillykov我用一个在我的机器上运行的示例更新了我的答案。如果它不在你身上，那我就难堪了。这里有一个关于registerModulePath的链接：。正如您从我的示例中看到的，从技术上讲，您的代码并不需要它。我将删除我的答案。我像你说的那样修改了代码，但出现了错误“拒绝访问受限URI”代码：“1012”，“无法加载'js.Test'；上次尝试的'../customwidget/Test.js'”，“未捕获的异常：无法加载跨域资源：js.Test”。文件夹“customwidget”位于html所在的同一文件夹中。@Kirill Lykov是名为Test还是TestWidget的小部件？文件名必须相同（仅在结尾使用.js）。你需要什么？您确定已将baseUrl添加到djConfig吗？@Frode