如何从 Javascript 中最好地使用 JSF2 资源

Question

在 JSF2 中使用资源是一件很棒的事情，因为您可以将资源存储在某个位置，然后使用 HTML 或 JSF2 中的不同替代方法来引用它们。我在 XHTML 页面中使用这样的资源：

<h:graphicImage value="#{resource['image:sort_up.png']}"/>

或者当我创建自己的 taglib 时使用来自 Java 的资源：

ResourceHandler resHandler = context.getApplication().getResourceHandler();
Resource minus = resHandler.createResource(IMAGES_TOGGLE_MINUS_PNG,"image");
writer.startElement("img", toComponent);
writer.writeAttribute("src", minus.getRequestPath(), "src");

HTML 中的翻译路径看起来像这样：

/nbfrontend/jsf2frontend/javax.faces.resource/sort_up.png.xhtml?ln=image

问题是：如何从 JavaScript 引用这些图像？

一种方法是创建一个隐藏元素，在其中存储路径，然后使用 getElementByID 检索隐藏元素并从那里检索值。但当应用程序中使用大量图像时，这不能很好地扩展。

另一种解决方法是将图像的路径传递给 JavaScript 函数，但这对于不直接调用的 JavaScript 函数来说是不可行的。

是否有其他替代方法可以在 JavaScript 中使用此类 JSF2 资源？

Answer 1

将其用作 CSS 背景图像，而不是通过 提供。

.toggle {
    background-image: url(#{resource['image:sort_up.png']});
}

.toggle.up {
    background-image: url(#{resource['image:sort_down.png']});
}

与这个 JS（jQuery 风格）结合

$('.toggle').click(function() {
    $(this).toggleClass('up');
    // ...
});