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

Question

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

<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}。