Question

您好我在JSP标记内生成了一些代码，它使用jQuery数据函数将数据与div相关联。

我使用UUID将jQuery脚本链接到页面上的div。然而，这种方法是丑陋和不方便的，我想知道是否有办法重构它不需要UUID。

代码看起来像这样。

    for(DomainObject domainObject : domainObjects){
//...
        String uuid = UUID.randomUUID().toString();

        out.println("<div id='" +uuid + "' class='" + divClass + "'>");

        // Write out the details of this domain object.
        out.println(/*...*/);

        // Associate data with the div
        out.println("<script type='text/javascript'>$('#"+uuid+"').data('domainObject'," + jsonSerializer.exclude("class").serialize(domainObject) + ")</script>");
        out.println("</div>");
//...
    }

Answer 1

如果你能够使用jQuery 1.4.3，有一种非常简单的方法可以将数据与dom中的元素相关联。从1.4.3开始，jQuery将检查任何data attributes的元素，并通过.data（“key”）自动使它们可用

<div class='myClass' data-domainObject='{"Name": "I am in your data!"}'>
    Domain Object
</div>

$(function(){
    alert($(".myClass").data("domainObject").Name);
});

jsfiddle

上的示例

由于看起来你只是使用脚本标签向元素添加数据，这个选项可能是合适的，看起来像这样（注意我没有使用jsp的经验）：

for(DomainObject domainObject : domainObjects){
//...

        out.println("<div class='" + divClass + "' data-domainObject='" + jsonSerializer.exclude("class").serialize(domainObject)+ "'>");

        // Write out the details of this domain object.
        out.println(/*...*/);
        out.println("</div>");
//...
    }

Answer 2

两种方式（例子使用JSTL / EL）

使用域对象的ID，如果有的话。

<div id="do_${domainObject.id}">
...
<script>$('#do_${domainObject.id}').foo();</script>

使用循环计数器。

<c:forEach items="${domainObjects}" var="domainObject" varStatus="loop">
    <div id="do_${loop.index}">
    ...
    <script>$('#do_${loop.index}').foo();</script>
</c:forEach>

请注意，ID 必须以字母字符开头。 ID以数字开头是非法的。 UUID可能会以数字开头返回ID。

Answer 3

不确定它是多么丑陋。也许你只想要一个较短的身份证？

UUID是普遍的独特之处。这远远超出了HTML页面中元素ID的要求 - 它们在页面中是唯一的。

创建长度为1或2位的页面唯一ID非常简单。您的JSP需要将randomUUID()替换为randomPageId()，它将返回d1，d2，d3等序列。

重构代码以删除uuid

3 个答案: