Come posso associare la proprietà CSS background-image?

Question

E 'possibile fare uno stile background-image vincolante?

ho provato questo codice:

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

Ho anche provato backgroundImage, senza virgolette in url, senza : dopo url, ma non è ancora funzionante. Tutti gli altri, come color o backgroundColor attacchi funzionano perfettamente.

Answer 1

Come indicato nella documentazione di , è necessario utilizzare il nome Javascript per lo stile che si desidera controllare.

Questo significa che si devono utilizzare backgroundImage invece di background-image.

Qualcosa di simile a questo:

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

Answer 2

Non sono sicuro che il motivo per cui tutti (tranne Sujesh) è rispondere a questa domanda e ancora difficile codificare il temp.png. Se non sono vincolanti a una proprietà ko.observable allora non usare data-bind. Basta usare la proprietà stile standard dell'elemento HTML.

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

Per l'associazione di dati per ottenere l'url auguro risposta di Sujesh Arukil lavorato per me, ma non lo fece. Se qualcuno ha che il lavoro, per favore mi illumini.

Ecco che cosa ha funzionato per me, ma non mi interessa per questo. Ho usato una calcolata per ottenere il valore di background-image.

Nel modello vista

self.imageUrl = ko.observable();

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

Nel HTML

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

Answer 3

Tra l'altro, è possibile impostare una consuetudine vincolante per rendere la sintassi meno ingombrante:

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

Poi, nel codice HTML si può fare

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

Answer 4

Non è necessario il : nella sezione url per un'immagine di sfondo, è solo url(/foo.png).

Il tuo legame anche bisogno di usare background-image dal momento che è la proprietà di stile, ma tra virgolette, in questo modo (backgroundImage è l'API JavaScript per lo stile):

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

demo live qui - http://jsfiddle.net/slace/EgUaM/

Modifica Dopo aver postato l'esempio Github ha iniziato sperimentando problemi di database quindi ecco un jsfiddle alternativo - http://jsfiddle.net/slace/EgUaM/1/

Answer 5

o semplicemente concatenate

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

Answer 6

sulla base della documentazione KO,

valore da impostare a qualsiasi proprietà in KO è ViewModal valore proprietà.

dove somepath = ViewModal proprietà che è PATH per l'immagine di sfondo.

Answer 7

Quando ci sono due nomi, utilizzare il primo nome in minuscolo ed il primo carattere del secondo nome in maiuscolo. Esempi:

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

consulta http://knockoutjs.com/documentation/style-binding.html e http://www.comptechdoc.org/independent/web/cgi/ javamanual / javastyle.html

Answer 8

Basta mettere le virgolette (virgolette singole) intorno al nome della proprietà. ogni volta che il hanno - in nome della proprietà per esempio background-image o background-url è necessario mettere le virgolette attorno al nome

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

Questo è il problema. Menzionato nella documentazione Knockout.

Answer 9

Quando u dire: data-bind: "{... somecode ...}" è necessario capire che u sono all'interno di javascript. Se si scrive: background-image cerca di sottrarre immagine di sfondo (background-image) da. Quello sono variabili non definite. Allora è molto più chiara.

Answer 10

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

È possibile che questo che ho usato supponiamo di lavoro.

Se si usebackground: 'url(imageUrl)', si prenderà in considerazione solo come una stringa.