个人中心
gpt4 book ai didi

javascript - 如何在不在 dojo.ready 中声明它的代码的情况下编写我的小部件

转载 作者：行者123 更新时间：2023-11-30 10:48:30 25 4
gpt4 key购买 nike

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

//测试.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>

//测试.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 的教程将解释如何将其正确地分离到自己的文件中。你知道如何解决这个问题吗？

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

UPD:加载跨域资源时出现问题。 here是类似的讨论，但我不明白如何解决这个问题。我可以在本地存储 dojo 但在这种情况下它找不到我的 TestWidget.js - 我不知道如何指定我的 scipts 的路径。如果我使用 baseUrl 这样做，它会说“无法加载‘dojo._base.lang’；最后尝试了‘./_base/lang.js’”。

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

最佳答案

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

  • dojo.cashe 应该是 dojo.cache
  • 您似乎将 customwidget.TestWidget 与 customwidget.TestDijit 混合使用了
  • 如果你想在你的小部件模板中使用 dijit.form.Button，你必须要求它

现在进入更重要的事情。当您使用 <script> 标记来包含 js 文件时，Dojo 不会在执行任何其他操作之前处理加载需求。这就是为什么你得到 mixin unknown，因为在对 dojo.declare 的调用中，类 dijit._Templated 尚未加载。

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

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

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

关于javascript - 如何在不在 dojo.ready 中声明它的代码的情况下编写我的小部件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6938747/

25 4 0
文章推荐： javascript - Jquery 等高
文章推荐： Swift Playground 中没有输出的 JSONDecoder
文章推荐： swift - 如何根据全局变量决定显示哪个 View
文章推荐： javascript - 如何在闭包中访问全局变量？ (JavaScript)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com