javascript 如何绑定 CSS background-image 属性？

How can I bind the CSS background-image property?

提问by Luka Siric

Is it possible to make a style background-image binding?

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

I tried this code:

我试过这个代码：

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

I also tried backgroundImage, without quotes in url, without :after url, but it's still not working. All the others, like coloror backgroundColorbindings are working perfectly.

我也试过backgroundImage，没有引号url，没有:之后url，但它仍然无法正常工作。所有其他的，像color或backgroundColor绑定都工作得很好。

回答by Mikael ?stberg

As stated in the documentation, you need to use the Javascript name for the style you want to control.

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

This means that you would have to use backgroundImageinstead of background-image.

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

Something like this:

像这样的东西：

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

回答by Thomas

I'm not sure why everyone (except Sujesh) is answering this question and still hard coding the temp.png. If you are not binding to a ko.observableproperty then don't use data-bind. Just use the standard style property of the html element.

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

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

For data binding to get the url I wish Sujesh Arukil's answer worked for me but it didn't. If anyone has that working, please enlighten me.

对于获取 url 的数据绑定，我希望 Sujesh Arukil 的回答对我有用，但没有。如果有人有那个工作，请赐教。

Here is what worked for me but I don't care for it. I used a computed to get the value of the background-image.

这对我有用，但我不在乎。我使用了一个计算来获取背景图像的值。

In the view model

在视图模型中

self.imageUrl = ko.observable();

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

In the HTML

在 HTML

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

回答by Dan

By the way, you can set up a custom binding to make the syntax less unwieldy:

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

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

Then in your HTML you can do

然后在你的 HTML 中你可以做

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

回答by Aaron Powell

You don't need the :in the urlsection for a background image, it is just url(/foo.png).

你并不需要:在url一个背景图像部分，它仅仅是url(/foo.png)。

Your binding also needs to use background-imagesince that is the style property, but in quotes, like so (backgroundImageis the JavaScript API for style):

您的绑定也需要使用，background-image因为这是 style 属性，但在引号中，像这样（backgroundImage是样式的 JavaScript API）：

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

Live demo here - http://jsfiddle.net/slace/EgUaM/

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

EditAfter posting the example Github started experiencing database issues so here's an alternate jsfiddle - http://jsfiddle.net/slace/EgUaM/1/

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

回答by Murali Bala

or just concatenate

或者只是连接

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

回答by Ipad

When u say: data-bind:"{...somecode...}" you need to understand that u are inside of javascript. If you write: background-image he tries to subtract image from background (background-image). Thats are undefined variables. Then it is much clearer.

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

回答by Thomas Lee

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

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

The above one i used suppose to work.

我使用的上面一个假设可以工作。

If you usebackground: 'url(imageUrl)', it will consider as a string only.

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

回答by Sujesh Arukil

Just put quotes (single quotes) around the property name. whenever your have -in the property name e.g. background-imageor background-urlyou need to put quotes around the name

只需在属性名称周围加上引号（单引号）。每当您有-属性名称时，例如，background-image或者background-url您需要在名称周围加上引号

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

That is the problem. Mentioned in the Knockout documentation.

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

回答by Bhagirath

based on KO documentation,

基于 KO 文档，

VALUE to be SET to any Property in KO is ViewModal Property Value.

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

where somepath = ViewModal Property that is PATH to your background image.

其中 somepath = ViewModal 属性是背景图像的路径。

回答by bowen

When there are two names, use the first name in lower case and the first character of the second name in upper case. Examples:

当有两个名字时，第一个名字小写，第二个名字的第一个字符大写。例子：

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

please refer to http://knockoutjs.com/documentation/style-binding.htmland http://www.comptechdoc.org/independent/web/cgi/javamanual/javastyle.html

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