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

Posted

技术标签:

【中文标题】如何编写我的小部件而不在 dojo.ready 中声明它的代码【英文标题】:How to write my widget without declaring it's code in dojo.ready 【发布时间】:2011-08-04 09:08:06 【问题描述】:

使用一些教程,我编写了简单的小部件,但它导致错误“declare customwidget.TestDijit: mixin #0 is unknown”:

//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)。当然,我不想把我所有的js代码都放在ready函数中。在提到的文章的代码示例中作者写了// Future tutorials will explain how to properly separate this out into its own file. 你知道如何解决这个问题吗?

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

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

test/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>

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

【问题讨论】:

【参考方案1】:

首先有几件事(但我猜这些主要是您在此处发帖时的拼写错误)。

dojo.cashe 应该是 dojo.cache 你好像把customwidget.TestWidgetcustomwidget.TestDijit混在一起了 如果你想在你的小部件模板中使用dijit.form.Button,你必须要求它

现在谈更重要的事情。当您使用

但是,如果您使用 dojo.require 加载小部件/模块,dojo 会确保 Test.js 中的需求(所有 dojo.require 语句)在尝试使用它们之前完成加载.因此,删除 Test.js

现在我们需要告诉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.templatetestdijit.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
 );

【讨论】:

好的,差不多就行了。我会删除我的答案。 我像你说的那样修改了代码,但出现错误“访问受限 URI 被拒绝”代码:“1012”、“无法加载 'js.Test';上次尝试 '../customwidget/ Test.js'", "未捕获的异常:无法加载跨域资源:js.Test"。文件夹“customwidget”位于 html 所在的同一文件夹中。 @Kirill Lykov 您的小部件是名为 Test 还是 TestWidget?文件名必须相同(仅以 .js 结尾)。你做什么jo.require?您确定将 baseUrl 添加到 djConfig 中吗? @Frode 是的,文件夹名称是 customwidget,文件名称是 Test.js,类名称是 customwidget.Test。并且 djConfig 已被修改。为了解决这个问题,我尝试在本地复制 dojo,但这导致了其他错误。 @KirillLykov 我用在我的机器上运行的示例更新了我的答案。如果它不在你的,那我就难住了。这是关于 registerModulePath 的链接:dojotoolkit.org/reference-guide/dojo/registerModulePath.html。正如您从我的示例中看到的那样,从技术上讲,您的代码不需要它。

以上是关于如何编写我的小部件而不在 dojo.ready 中声明它的代码的主要内容,如果未能解决你的问题,请参考以下文章

角落 QTabBar 上的小部件不在角落

在 FutureBuilder 的情况下,我应该如何获得一组可滚动的小部件而不会溢出

当鼠标悬停而不是 pyFLTK 中的小部件时如何调用函数?

如果正在使用我的小部件,如何查询 WidgetKit?

如何隐藏博客标签搜索中的小部件

如何使用服务来监控 Android 中的方向变化