0

I have a template which renders a background image to CSS within a <div> like this style="background-image: url({{>~facilityImagePathDisplay(#data)}})"

Visual Studio doesn't like this and it's not a big deal but I wanted to see if there was a proper way to do this. I read through the documentation. Other stack questions and the below was created based off of the docs. This specifically links to all the docs Logic in JsViews css-tag

<div class="tile-image" data-link="css-background-image{:~facilityImagePathDisplay(#data)}" >

The above statement outputs exactly this to the div. <div class="tile-image" data-link="css-background-image{:~facilityImagePathDisplay(#data)}"> so it looks like it's not firing the helper function and rendering anything at all. Am I missing something?

Daniel Jackson
  • 1,036
  • 1
  • 11
  • 35

1 Answers1

1

It depends if you are running the link() method of JsViews, or simply the render() method of JsRender.

Your first version will works in both cases, but is simply rendering the CSS style. The second version would only be used if you are running the link() method of JsViews - for data-binding etc. (So the background image could be dynamically updated if you data-binding triggers a new value).

For the data-link version, you need to makes sure the helper is returning a string that is not just "someUrl", but "url(someUrl)" - to provide the correct CSS data url syntax. In that case, the following should work:

data-link="css-background-image{:~facilityImagePathDisplay(#data)}"

Alternatively you can have the helper return just the "someUrl" string, but then include the "url(" and ")" strings in the template:

data-link="css-background-image{:'url(' + ~facilityImagePathDisplay(#data) + ')'}"
BorisMoore
  • 8,444
  • 1
  • 16
  • 27
  • I am using the `link()` and I used the second example you had which worked so I appreciate the help and explanation with this. – Daniel Jackson Jun 23 '20 at 20:19