Binding Server Connect to DOM Elements

I'm not building a fully fledged CMS. Only 1 or 2 customised text areas.
But I can't quite get my head around an efficient way to bind the results of a server connect to my page elements. e.g

SC returns

I would then like to bind the caption to the element id of "content" e.g.

<p id="welcome" dmx-html="scTranslations.data.queryCMS.caption"></p> ??

Any advise would be appreciated

Use dynamic attributes > id and select your dynamic id there.

Maybe I don't understand correctlly...
But, your query here:
`"scTranslations.data.queryCMS.caption"

returns 2 records (from what is shown on your screenshot):
image

So, you need to pull the first or the secondc caption depending on your needs:

  • scTranslations.data.queryCMS[0].caption -> "We are thrilled......."
  • scTranslations.data.queryCMS[1].caption -> "This is an example......."

I need to bind the caption values where the element id is the content value

<p id="welcome"></p> and to <p id="offer"></p>

To apply dynamic values in the id, your code needs to look like:

<p dmx-bind:id="content"><p>

Sorry, I want to bind the caption in my server connect to a corresponding content id, which is fixed.
<p id="offer"></p>

Hard coding the 2nd value in the array is as follows
<p id="offer" dmx-html="scTranslations.data.queryCMS[1].caption"></p>

but I want the dmx-html to be based on scTranslations.data.queryCMS.caption that is linked to this element fixed id.

Ah i didn't understand your idea in the beginning.
The expression should then be:

scTranslations.data.queryCMS.where(`content`, 'welcome', '==')[0].caption
2 Likes

Thank you @Teodor , apologies if I wasn't clear in the beginning.
Thats working for me :+1: