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 }"

如何敲除绑定到backgroundImage URL？

2 个答案: