如何绑定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/