Come posso eseguire un binding a eliminazione diretta con un URL backgroundImage?

Question

devo una matrice osservabile con

var items= [ 
    {"image": "/images/image1.jpg" }, 
    {"image": "/images/image2.jpg" }, 
    {"image": "/images/image3.jpg" } 
]; 

Il mio modello è simile al seguente:

<div data-bind="foreach: items"> 
    <div class="box" data-bind="style: {'background-image': url(image)}"></div> 
</div> 

Purtroppo, questo non funziona. Quello che voglio è questo:

<div> 
    <div class="box" style="background-image: url(/images/image1.jpg)"></div> 
    <div class="box" style="background-image: url(/images/image2.jpg)"></div> 
    <div class="box" style="background-image: url(/images/image3.jpg)"></div> 
</div> 

Come posso raggiungere questo?

Answer 1

È necessario per concatenare le stringhe:

data-bind="style: { backgroundImage: 'url(\'' + image() + '\')' }" 

Se image è in realtà un osservabile, è necessario chiamare, o si finirà per concatenare la funzione invece.

Si noti che poiché si sta vincolando a un'espressione che coinvolge la proprietà, è necessario chiamare la funzione (con ()). Altrimenti, si finirà con un'espressione Javascript che concatena la funzione stessa.
L'unica ragione per cui non è necessario () per collegamenti semplici è che Knockout rileva quando l'associazione restituisce una funzione di proprietà e la chiama per te.

Answer 2

Non so se questo è meglio o peggio ...

ho assemblato l'url() all'interno della mia modelview:

var items= [ 
    {"image": "url(/images/image1.jpg)" }, 
    {"image": "url(/images/image2.jpg)" }, 
    {"image": "url(/images/image3.jpg)" } 
]; 

Poi ho potuto dati-legare l'immagine come al solito :

data-bind="style: { 'background-image': image }" 

Answer 3

questo è il mio esempio. Usalo sempre

<div data-bind="foreach: items"> 
    <div class="box" data-bind="style: {'backgroundImage': 'url('+ image +')'}"></div> 
</div>