Ссылка на данные CSS фонового изображения с использованием вспомогательной функции, которая не отображается

Question

У меня есть шаблон, который отображает фоновое изображение в CSS в <div> вот так style="background-image: url({{>~facilityImagePathDisplay(#data)}})"

Visual Studio это не нравится, и это не имеет большого значения, но я хотел увидеть если бы был правильный способ сделать это. Прочитал документацию. Другие вопросы о стеке и приведенные ниже были созданы на основе документов. Это, в частности, ссылается на все документы Logi c в JsViews css -tag

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

Приведенный выше оператор выводит именно это в div. <div class="tile-image" data-link="css-background-image{:~facilityImagePathDisplay(#data)}"> так что похоже, что он вообще не запускает вспомогательную функцию и ничего не отображает. Я что-то упускаю?

Answer 1

Это зависит от того, используете ли вы метод link() JsViews или просто метод render() JsRender.

Ваша первая версия будет работать в обоих случаях, но просто отображает CSS стиль. Вторая версия будет использоваться только в том случае, если вы используете метод link() JsViews - для привязки данных et c. (Таким образом, фоновое изображение может быть динамически обновлено, если привязка данных вызывает новое значение).

Для версии со ссылкой на данные вам необходимо убедиться, что помощник возвращает строку, которая не просто "someUrl", но "url(someUrl)" - чтобы обеспечить правильный синтаксис CSS URL-адреса данных. В этом случае должно работать следующее:

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

В качестве альтернативы вы можете заставить помощник возвращать только строку "someUrl", но затем включить строки "url(" и ")" в шаблон:

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