我怎么可以绑CSS的背景图像酒店?

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>

对于数据绑定以获取URL，我希望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 for式):

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

现场演示在这里 http://jsfiddle.net/slace/EgUaM/

编辑 之后发布的实例。开始经历数据库的问题，所以这里有一个备用jsfiddle- http://jsfiddle.net/slace/EgUaM/1/

Answer 5

或只是联合

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

Answer 6

基于KO文档，

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

其中一些路径= View -Modal属性是您背景图像的路径。

Answer 7

当有两个名称时，请在较低情况下使用第一个名称，而在上案例中使用第二个名称的第一个字符。例子：

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 8

只需在属性名称周围放置引号（单引号）即可。每当你有 - 在属性名称中 background-image 或者 background-url 您需要围绕名称进行报价

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

那就是问题所在。淘汰文档中提到。

Answer 9

当您说：数据界：“ {... somecode ...}”您需要了解您在JavaScript内部。如果您编写：背景图像，他会尝试从背景（背景图像）中减去图像。那是未定义的变量。然后，这更清楚了。

Answer 10

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

我用过的上述假设可以工作。

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