backgroundImage URLへのノックアウトバインディングはどうすればできますか？

Question

私は

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

で観察アレイは私のテンプレートは次のようになります：

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

残念ながら、これは動作しません。私が欲しいのはこれです：

<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> 

どうすればいいですか？

Answer 1

あなたの文字列を連結する必要があります。

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

imageが実際に観測可能である場合、あなたはそれを呼び出す必要があります、またはあなたが代わりに機能を連結してしまいます。

プロパティを含む式にバインドするので、関数を呼び出す必要があります（()）。それ以外の場合は、関数自体を連結するJavascript式になります。
簡単なバインディングのために()を必要としない唯一の理由は、バインディングがプロパティ関数を返すときにKnockoutがそれを検出して呼び出すことです。私のモデルビュー内の

Answer 2

これは、任意のより良いか悪いかである場合、私は知らない...

私は（URLを組み立て）：

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

その後、私はいつものように画像をデータバインドすることができ：

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

Answer 3

これは私の例です。常に使用してください

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