Question

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

我试过这段代码：

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

在backgroundImage之后，我还尝试了url，:没有引号，但url之后没有color，但它仍无效。所有其他内容，如backgroundColor或{{1}}绑定都可以正常运行。

Answer 1

如documentation中所述，您需要将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)'，则仅将其视为字符串。

如何绑定CSS background-image属性？

10 个答案: