Question

No mutter which template engine used for my question.

I involved in project where find such code in JSP page:

<li class="clazz" attr="XXX">...</li>

and jQuery code which extract value from attr attribute:

$(".clazz").click(function () {
   var v = $(this).attr("attr");
   ...
}

Actually XXX is URL. I change JSP code to:

<li class="clazz"><a href="XXX">...</a></li>

and JS code to:

$(".clazz").click(function () {
   var v = $(this).find("a").attr("href");
   ...
}

Now I reach goal to have valid HTML.

Using fake tags simplify code but produce invalid HTML.

Is there easy way to pass data to JavaScript and preserve code simplicity?

Which technique to use to pass arbitrary string from template engine to JavaScript?

I assume that this data shouldn’t rendered to user and expect that it shouldn’t be based on CSS like by hiding data:

<span id="real-points-count" style="display:none">${param}

UPDATE. How is this code:

<div class="clazz" min="MINDATA" max="MAXDATA">...<>

can be transformed to carry MINDATA and MAXDATA to JavaScript in way to get valid HTML5?

Answer 1

If you can work with HTML5, you can make use of data-* attributes which can let you add custom attributes to store data for an HTML element.

e.g.

<li class="clazz" data-myattr="XXX">...</li>

And then in JS’

$(".clazz").click(function () {
   var v = $(this).data("myattr");
   ...
}

References: HTML5 Custom Data Attributes (data-), jQuery HTML5 data- Attributes