Data-Link to CSS background-image 使用辅助函数不渲染

Question

我有一个模板可以像这样在 <div> 中将背景图像渲染到 CSS style="background-image: url({{>~facilityImagePathDisplay(#data)}})"

Visual Studio 不喜欢这个，这没什么大不了的，但我想看看是否有适当的方法来做到这一点。我通读了文档。其他堆栈问题和以下内容是根据文档创建的。这特别链接到所有文档 Logic in 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

看你是运行JsViews的link()方法，还是JsRender的render()方法

您的第一个版本在这两种情况下都适用，但只是呈现 CSS 样式。仅当您是运行 JsViews 的 link() 方法时才使用第二个版本 - 用于数据绑定等。（因此，如果数据绑定触发新值，背景图像可以动态更新） .

对于 data-link 版本，您需要确保 helper returning 的字符串不仅仅是 "someUrl"，而是 "url(someUrl)" - 到提供正确的 CSS 数据 url 语法。在这种情况下，以下应该有效：

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

或者，您可以让助手 return 只包含 "someUrl" 字符串，然后在模板中包含 "url(" 和 ")" 字符串：

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

Data-Link to CSS background-image using a helper function not render