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

时间:2011-08-04 09:08:06

标签: 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>
<script type="text/javascript" src="Test.js"> </script>
<script type="text/javascript">

dojo.require("customwidget.TestWidget");

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

// test.js

dojo.provide('customwidget.TestDijit')
dojo.require('dijit._Widget');
dojo.require('dijit._Templated');
dojo.require('dojo.caсhe');

dojo.declare("customwidget.TestDijit",  [dijit._Widget, dijit._Templated],
{
    //can't use  dojo.caсhe('customwidget.template', 'testdijit.html') I don't know why
    templatePath : "",
    widgetsInTemplate : true,
    lang : 'EN',
    postCreate: function(args, frag)
    {
        this.inherited('postCreate', arguments);
    },
    clickEvent : function()
    {
        alert("Button Click event");
    }
});

// testdijit.html

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

我发现如果我将所有小部件的代码放在dojo.ready函数中,那么它将起作用(感谢this article)。当然,我不想在ready函数中找到我的所有js代码。在上面提到的文章的代码中,作者写了// Future tutorials will explain how to properly separate this out into its own file. 你知道如何解决这个问题吗?

PS。你也知道为什么我不能在这个js代码中使用dojo.cashe吗?

UPD:加载跨域资源的问题。 here是类似的讨论,但我无法理解如何解决问题。我可以存储dojo localy但在这种情况下它找不到我的TestWidget.js - 我不知道如何指定我的scipts的路径。如果我使用baseUrl执行此操作,则会说“无法加载'dojo._base.lang';最后尝试'./_ base / lang.js'”。

测试/的test.html

<!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>

测试/ 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");
    }
});

1 个答案:

答案 0 :(得分:4)

首先有一些事情(但我猜这些都是你在这里发帖时犯的错误)。

  • dojo.cashe应为dojo.cache
  • 您似乎将customwidget.TestWidgetcustomwidget.TestDijit
  • 混合在一起
  • 如果您想在小部件的模板中使用dijit.form.Button,则必须要求

现在谈到更重要的事情。当您使用&lt; script&gt;时要包含js文件的标记,Dojo在执行任何其他操作之前不会处理加载要求。这就是为什么你的mixin未知,因为在调用dojo.declare时,类dijit._Templated尚未加载。

但是,如果使用dojo.require加载小部件/模块,dojo会在尝试使用它们之前确保 Test.js 中的要求(所有dojo.require语句)都已加载。因此,请删除 Test.js 的&lt; script&gt; -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>

这告诉dojo.require开始在与HTML文件相同的文件夹中查找小部件,而不是在从中加载Dojo的服务器上。由于我们将 customwidget 文件夹放在HTML文件的旁边,这应该可以正常工作。

dojo.cache来电中,您使用的是customwidget.template testdijit.html 。这意味着您的 testdijit.html 文件必须放在 customwidget / template /


编辑:这是一个可在我的机器上正常运行的设置。

文件夹结构:

test/
   test.html
   customwidget/
      TestWidget.js

的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>

TestWidget.js

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