JSViews Merge id with string to get unique id - jsviews

Question

I have an array which I am iterating over using
{{for}}
in the loop, I am creating various elements, one of which I need to generate unique Ids for include one of the variables in the array (Id)
so for example:
<div id="post-123">...
I have tried:
<div data-link="id{post-:Id}">...
and
div data-link="id{'post-':Id}">...
and
<div id="post-" data-link="id{merge:Id}">...
however none of these work.
if I omit the string and just use:
<div data-link="id{:Id}">...
it sets the Id just fine. Can anyone see what I am doing wrong?

Answer 1

These links talk of data-linking to attributes:
http://www.jsviews.com/#linked-elem-syntax
http://www.jsviews.com/#link-elemattribs
http://www.jsviews.com/#samples/data-link/attributes
The standard syntax is
data-link="attributeName{:dataPathOrExpression}"
In your case attributeName is id.
dataPathOrExpression can be any expression, so here you need it to be the Id value concatenated with (preceded by) the string 'post-', so you need to write:
<div data-link="id{:'post-' + Id}">...
or, equivalently
<div data-link='id{:"post-" + Id}'>...
You don't want to put anything between the { and :. The tag is {: (http://www.jsviews.com/#assigntag) - and the only thing you can put between those characters is a converter name such as myCvt, as in: id{myCvt:...}.
That said, if your Id values are not changing observably, then you don't need to data-link the id and you can instead write:
<div id="post-{{:Id}}">...
just as you would if you were rendering the template as a JsRender template, without data binding.