Come posso associare la proprietà CSS background-image?

Question

È possibile creare un bind di sfondo-immagine di stile?

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 quelli color o backgroundColor, funzionano perfettamente.

Answer 1

Come indicato nello documentation, è necessario utilizzare il nome Javascript per lo stile che si desidera controllare.

Ciò significa che è necessario utilizzare backgroundImage anziché 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 ti servono il : nella sezione url per un'immagine di sfondo, è solo url(/foo.png).

Il tuo legame ha anche bisogno di utilizzare 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 pubblicato l'esempio Github ha iniziato a riscontrare problemi di database, quindi ecco un jsfiddle alternativo - http://jsfiddle.net/slace/EgUaM/1/

Answer 3

Basta inserire le virgolette (virgolette singole) attorno al nome della proprietà. ogni volta che hai - nel nome della proprietà, ad es. background-image o background-url è necessario inserire le virgolette attorno al nome

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

che è il problema. Menzionato nella documentazione Knockout.

Answer 4

sulla base della documentazione KO,

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

dove somepath = Proprietà ViewModal che è PATH all'immagine di sfondo.

Answer 5

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

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

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

Answer 6

Io non sono sicuro perché tutti (tranne Sujesh) è rispondere a questa domanda e ancora difficile codificare il temp.png. Se non si è vincolati a una proprietà ko.observable, non utilizzare data-bind. Basta usare la proprietà di stile standard dell'elemento html.

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

per l'associazione dati per ottenere l'url auguro risposta di Sujesh Arukil ha funzionato per me, ma non fu così. Se qualcuno lo ha funzionato, per favore illuminami.

Ecco cosa ha funzionato per me ma non mi interessa per questo. Ho usato un calcolo per ottenere il valore dell'immagine di sfondo.

Nel modello di visualizzazione

self.imageUrl = ko.observable(); 

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

Nella HTML

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

Answer 7

o semplicemente concatenare

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

Answer 8

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 9

Quando u dire: data-bind: "{... somecode ...}" è necessario capire che u sono all'interno di javascript. Se scrivi: background-image prova a sottrarre l'immagine dallo sfondo (background-image). Ecco le variabili non definite. Quindi è molto più chiaro.

Answer 10

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

quello di cui sopra ho usato supponiamo di lavorare.

Se si utilizza background: 'url(imageUrl)', verrà considerato solo come una stringa.