如何绑定CSS background-image属性？

Question

是否可以制作样式背景图像绑定？

我试过这段代码：

<div data-bind="foreach: itemList">
    <div data-bind="style: { background-image: 'url:(temp.png)' }">some text</div>          
</div>

我也尝试过backgroundImage ，在url没有引号，没有:在url之后，但它仍然无效。 所有其他的，如color或backgroundColor绑定工作完美。

Answer 1

如文档中所述，您需要将Javascript名称用于要控制的样式。

这意味着您必须使用backgroundImage而不是background-image 。

像这样的东西：

<div data-bind="foreach: itemList"> 
    <div data-bind="style: { backgroundImage: 'url(temp.png)' }">some text</div>
</div>

Answer 2

我不确定为什么每个人（除了Sujesh）都在回答这个问题并且仍然在temp.png 。 如果您没有绑定到ko.observable属性，则不要使用data-bind 。 只需使用html元素的标准样式属性即可。

<div data-bind="foreach: itemList">
    <div style="background-image: url('temp.png');">some text</div>          
</div>

为了获得数据绑定，我希望Sujesh Arukil的回答对我有用，但事实并非如此。 如果有人有这个工作，请赐教。

这对我有用，但我不关心它。 我使用计算来获取背景图像的值。

在视图模型中

self.imageUrl = ko.observable();

self.bgImageUrlStyle = ko.computed(function() {
    return "url(" + self.imageUrl() + ")";
});

在HTML中

<div data-bind="style: { 'background-image': bgImageUrlStyle }">
</div>

Answer 3

顺便说一句，您可以设置自定义绑定以使语法不那么笨拙：

ko.bindingHandlers.backgroundImage = {
  update: function(element, valueAccessor) {
    ko.bindingHandlers.style.update(element,
      function(){return {backgroundImage: "url('" + valueAccessor() + "')"}});
  }
};

然后在你的HTML中你可以做到

<div data-bind="backgroundImage: image"></div>

Answer 4

你不需要:在url部分中获取背景图片，它只是url(/foo.png) 。

你的绑定也需要使用background-image因为那是样式属性，但是在引号中，如此（ backgroundImage是样式的JavaScript API）：

<div data-bind="style: { 'background-image': 'url(https://www.google.com/intl/en_com/images/srpr/logo3w.png)' }"></div>​

现场演示 - http://jsfiddle.net/slace/EgUaM/

编辑发布示例后，Github开始遇到数据库问题所以这里是另一个jsfiddle - http://jsfiddle.net/slace/EgUaM/1/

Answer 5

或者只是连接

<div data-bind="style: { backgroundImage: 'url(\'' + $data.videoImg + '\')' }"> </div>

Answer 6

只需在属性名称周围加上引号（单引号）即可。 只要你有-在属性名称中，例如background-image或background-url你需要在名称周围加上引号

<div data-bind="style: {'background-image' : 'url(somepath)'}>

那就是问题所在。 在Knockout文档中提到过。

Answer 7

基于KO文档，

要设置为KO中任何属性的值是ViewModal属性值。

其中somepath = ViewModal属性，它是背景图像的PATH。

Answer 8

如果有两个名称，请使用小写的第一个名称和大写的第二个名称的第一个字符。 例子：

color = color
background-color = backgroundColor
font-style = fontStyle
font-weight = fontWeight 

请参阅http://knockoutjs.com/documentation/style-binding.html和http://www.comptechdoc.org/independent/web/cgi/javamanual/javastyle.html

Answer 9

当你说：data-bind：“{... somecode ...}”你需要明白你是在javascript里面。 如果你写：background-image他试图从背景中减去图像（背景图像）。 那是未定义的变量。 然后它更清楚。

Answer 10

<div data-bind="style: { background: 'url(' + imageUrl + ')' }" ></div>

以上我用过的假设工作。

如果您使用background: 'url(imageUrl)' ，它将仅视为字符串。