javascript - Grails Assets 管道 : how to find image url dynamically in javascript (with knockout)

Question

当页面上有大量可能会更改的图像资源(因为您正在使用 Knockout、Angular 等动态创建 DOM 的一部分)并且需要将 URL 放在一起时，最佳实践是什么？

为了简单起见，假设我有一组表示从 0% 到 100% 的进度的图像，并且我想插入一段代码来有效地执行以下操作:

var oImg=document.createElement("img");
var percent = calculateSomeOtherThingHere();
oImg.setAttribute('src', 'SOME URL GOES HERE%/pctImage' + percent);
document.body.appendChild(oImg);

此外，如何确保资源管道了解我在渲染页面时可能需要任何这些图像(从 pctImage0 到 pctImage100)？

有人有任何线索吗？谢谢。

Answer 1

如果您使用带有 asset 插件的 grails 3.x，您可以在 View (或布局)gsp 文件中插入以下代码:

<g:javascript>
    var grailsRes = {
        pctImage1 : '${assetPath(src: '1.jpg')}',
        pctImage2 : '${assetPath(src: '2.jpg')}',
        pctImage3 : '${assetPath(src: '3.jpg')}',
        //...
        pctImage98 : '${assetPath(src: '98.jpg')}',
        pctImage99 : '${assetPath(src: '99.jpg')}',
        pctImage100 : '${assetPath(src: '100.jpg')}'
    };
</g:javascript> 

然后，将您的 javascript 代码更改为如下所示:

var oImg=document.createElement("img");
var percent = calculateSomeOtherThingHere();
oImg.setAttribute('src', grailsRes['pctImage' + percent]);
document.body.appendChild(oImg);

对于更简单的代码，您可以使用具有索引访问的数组。

检查grails assets plugin documentation here .