如何使用 JSF 复合组件使 id 在页面上唯一？

Question

我正在为 Javascript 图表库制作一个名为 flot 的组件。

<cc:interface>        
    <cc:attribute name="data" required="true" /> 
</cc:interface>

<cc:implementation>
    <div id="placeholder" style="width:600px;height:300px;"></div>
    <script type="text/javascript"> 
        //<![CDATA[
    $(function () {       
        
      var d1 = [#{cc.attrs.data}];     

        $.plot($("#placeholder"), [ d1 ]);

    });
    //]]>
    </script>
</cc:implementation>

这是迄今为止我拥有的少量代码。我遇到的问题是如何使该 div 标签在页面上随机生成，以便我可以输出多个图表。显然在目前的情况下它不会这样做。我需要将值传递到 javascript 函数中。

我知道我可以创建另一个需要 id 的属性，并且用户必须指定 id，但我注意到很多组件不需要 id。在像 primefaces 和icefaces 这样的重型 ajax/javascript 库中，id 似乎是随机的。

Answer 1

您可以通过#{cc.id}获取复合组件自己的ID。因此，为了确保唯一性，只需执行以下操作：

<div id="#{cc.id}_placeholder" style="width:600px;height:300px;"></div>

。

$.plot($("##{cc.id}_placeholder"), [ d1 ]);

如果您未在组件上指定任何 id 属性，JSF 将自动生成一个 例如

<my:plot id="foo">

，这里 foo 将在复合组件实现中用作 #{cc.id}。