代码之家 › 专栏 › 技术社区 › Alpha

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

relative-path dojo templates

1

Alpha · 技术社区 · 12 年前

我有一个dijit小部件,相对于dojo的根,位于以下位置:

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

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

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

现在,在我的模板文本中:

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

然而,这是相对于应用程序根(既不是dojo的根,也不是模板位置)来解决的。

如何使我的模板直接解析到它的位置?

3 回复 | 直到 12 年前

1

2

Dimitri Mestdagh 12 年前

好吧,我会做以下操作,例如在图像上做一个附加点:

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

2

1

inanutshellus user6579257 9 年前

我也遇到过类似的问题,我需要一条相对的路径 dojo/text 样板例如

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

事实证明,你应该给出一个“模块路径”,而不是一个“愚蠢的url”,因此不会工作:

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

它给了你很大的错误 IrrationalPath (没有任何解释)。原来你不允许使用“ ../ “,所以它很奇怪。你当然可以使用绝对路径,从 / ,但在我的情况下,整个路径并不能得到保证,所以我通过在我的 dojoConfig ,就像这样

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

那就参考 templatePkg 作为模板路径的开头,如下所示:

"dojo/text!templatePkg/MyTemplateForSomeWidget.html"

对我来说,“困难的部分”是绕过“包”必须用于JavaScript源的想法,并认为其他人可能也有同样的误解。

希望这能有所帮助。 G

3

0

Darien Sam Palmer 12 年前

确保 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 ,您还应该考虑分配 要求 值转换为 contextRequire 所有物这将允许您在HTML模板中执行以下操作:

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