¿Cómo puedo enlazar la CSS background-image propiedad?

Question

Es posible hacer un estilo de imagen de fondo vinculante?

He probado este código:

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

También probé backgroundImage, sin comillas en url, sin : después de url, pero aún no funciona.Todos los otros, como color o backgroundColor los enlaces están funcionando a la perfección.

Answer 1

Como se indica en el documentación, debe usar el nombre de JavaScript para el estilo que desea controlar.

Esto significa que tendrías que usar backgroundImage en vez de background-image.

Algo como esto:

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

Answer 2

No estoy seguro de por qué todos (excepto Sujesh) están respondiendo esta pregunta y aún codificando el temp.png. Si no estás vinculado a un ko.observable Propiedad y luego no usar data-bind. Simplemente use la propiedad de estilo estándar del elemento HTML.

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

Para la vinculación de datos para obtener la URL, deseo que la respuesta de Sujesh Arukil funcionara para mí, pero no lo hizo. Si alguien tiene eso funcionando, por favor ilumíname.

Esto es lo que funcionó para mí, pero no me importa. Usé un calculado para obtener el valor de la imagen de fondo.

En el modelo de vista

self.imageUrl = ko.observable();

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

En el html

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

Answer 3

Por cierto, puede configurar un enlace personalizado para que la sintaxis sea menos difícil de manejar:

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

Entonces en tu html puedes hacer

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

Answer 4

Usted no necesita la : en el url sección de una imagen de fondo, es sólo url(/foo.png).

Su unión también tiene que usar background-image ya que es el estilo de la propiedad, pero en citas, como así (backgroundImage es la API de JavaScript para el estilo):

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

La demostración en vivo de aquí - http://jsfiddle.net/slace/EgUaM/

Editar Después de publicar el ejemplo de Github comenzó a experimentar problemas de base de datos así que aquí tiene una alternativa jsfiddle - http://jsfiddle.net/slace/EgUaM/1/

Answer 5

o simplemente concatenar

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

Answer 6

Basado en la documentación de KO,

El valor se establecerá en cualquier propiedad en KO es el valor de la propiedad ViewModal.

donde nomePath = ViewModal Propiedad que es camino a su imagen de fondo.

Answer 7

Cuando hay dos nombres, use el primer nombre en minúsculas y el primer carácter del segundo nombre en la caja superior. Ejemplos:

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

por favor refiérase a http://knockoutjs.com/documentation/style-binding.htmly http://www.comppteChdoc.org/independent/web/cgi/javamanual/javastyle.html

Answer 8

Acabo de poner cotizaciones (cotizaciones individuales) alrededor del nombre de la propiedad. Siempre que tengas - En el nombre de la propiedad, por ejemplo background-image o background-url Necesitas poner citas en el nombre

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

Ese es el problema. Mencionado en la documentación de eliminación.

Answer 9

Cuando dices: Data-Bind: "{... Somecode ...}" Debes entender que estás dentro de JavaScript. Si escribe: imagen de fondo, intenta restar la imagen del fondo (imagen de fondo). Eso son variables indefinidas. Entonces es mucho más claro.

Answer 10

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

El anterior que utilicé supongo que funciona.

Si utilizabackground: 'url(imageUrl)', considerará solo como una cadena.