css - 如何对 backgroundImage URL 进行淘汰赛绑定？

Question

我有一个可观察的数组

var items= [
    {"image": "/images/image1.jpg" },
    {"image": "/images/image2.jpg" },
    {"image": "/images/image3.jpg" }
];

我的模板如下所示：

<div data-bind="foreach: items">
   <div class="box" data-bind="style: {'background-image': url(image)}"></div>
</div>

不幸的是，这不起作用。我想要的是这样的：

<div>
  <div class="box" style="background-image: url(/images/image1.jpg)"></div>
  <div class="box" style="background-image: url(/images/image2.jpg)"></div>
  <div class="box" style="background-image: url(/images/image3.jpg)"></div>
</div>

我怎样才能做到这一点？

Answer 1

你需要连接你的字符串：

data-bind="style: { backgroundImage: 'url(\'' + image() + '\')' }"

如果image实际上是一个可观察的，您将需要调用它，否则您最终将连接该函数。

请注意，由于您要绑定到涉及该属性的表达式，因此您必须调用该函数（使用()）。否则，您将得到一个连接函数本身的 Javascript 表达式。
您不需要()简单绑定的唯一原因是 Knockout 会检测绑定何时返回属性函数并为您调用它。

Answer 2

我不知道这是更好还是更糟......

我在模型视图中组装了 url()：

var items= [
    {"image": "url(/images/image1.jpg)" },
    {"image": "url(/images/image2.jpg)" },
    {"image": "url(/images/image3.jpg)" }
];

然后我可以像往常一样对图像进行数据绑定：

data-bind="style: { 'background-image': image }"

Answer 3

这是我的例子。始终使用它

<div data-bind="foreach: items">
    <div class="box" data-bind="style: {'backgroundImage': 'url('+ image +')'}"></div>
</div>