Question

我有一个dijit小部件，相对于dojo根位于以下位置：

/modules/components/myWidget/template/MyWidget.html

现在，除了这个模板，我还有一个需要包含在模板中的图像文件：

/modules/components/myWidget/template/myImage.png

现在，在我的模板文字中：

<img src="./myImage.png" />

但是，这相对于应用程序根目录（也不是dojo的根目录，也不是模板位置）。

如何才能让我的模板直接解析到它的位置？

Answer 1

好吧，我会做以下事情，为图像添加一个附加点，例如：

<img src="" data-dojo-attach-point="imageNode" />

然后在您的JavaScript代码中（例如在您的小部件的postCreate函数中），我将执行以下操作：

declare([...], {
    postCreate: function() {
        this.imageNode.src = require.toUrl("./template/myImage.png");
    }
}

使用require.toUrl，您实际上会获得URL，如果您希望将其作为模块加载，则会使用该URL。这意味着：

require.toUrl("./template/myImage.png");

指的是当前模块路径（./），可能是/modules/components/myWidget，然后是template/myImage.png。

Answer 2

我有一个类似的问题，我需要一个相对路径到我的dojo/text模板。例如

/foo
    /js
       /stuff
           SomeWidget.js
    /templates
       /MyTemplateForSomeWidget.html

事实证明你应该给出一个＆＃34;模块路径＆＃34;不是一个愚蠢的网址＆＃34;，因此赢了工作：

"dojo/text!../../templates/MyTemplateForSomeWidget.html"

它为您提供了很大的错误IrrationalPath（没有解释）。原来你不允许使用＆＃34; ../＆＃34;，所以它吓坏了。你当然可以使用绝对路径，从/开始，但在我的情况下，整个路径都没有保证，所以我通过在dojoConfig中注册路径解决了这个问题。，就像这样

dojoConfig = {
    // ...
    packages: [
        { name: 'app', location: '/foo/js/app' },
        { name: 'templatePkg', location: '/foo/templates/' },
        // ... etc
    }
}

然后只需将templatePkg作为模板路径的开头，如下所示：

"dojo/text!templatePkg/MyTemplateForSomeWidget.html"

＆＃34;艰难的部分＆＃34;对我来说，我想到了一个＆＃34;包装＆＃34;必须是JavaScript源代码，并认为其他人可能有同样的误解。

希望这会有所帮助。 -G。

Answer 3

确保require方法像模块一样
使用require.ToUrl("./relative/path")

下一个例子来自工作中的生产代码，我已经删除了额外的东西。我们假装文件是app/widget/thingy.js：

define([
    "require" // Needed for relative require.toUrl() calls
    /* stuff */
], function(require /*stuff*/){
    var blankImage = require.toUrl("../resources/transparent.gif");
    /* stuff */
});

运行时，blankImage值应为"app/resources/transparent.gif"。

此外，如果您使用的是Dijits和_WidgetBase，则还应考虑将require值分配到contextRequire属性中。这将允许您在HTML模板中执行以下操作：

<div data-dojo-type="./SiblingWidget"></div>

如何在dijit模板中设置相对路径？

3 个答案: