32

私は観察可能な配列を持っています

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>

どうすればこれに到達できますか？

4

3 に答える 3

67

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

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

が実際にオブザーバブルである場合imageは、それを呼び出す必要があります。そうしないと、代わりに関数を連結することになります。

プロパティを含む式にバインドしているため、関数を呼び出す必要があることに注意してください ( with ())。そうしないと、関数自体を連結する Javascript 式になってしまいます。
単純なバインディングが必要ない唯一の理由()は、Knockout がバインディングがプロパティ関数を返すタイミングを検出し、それを呼び出すためです。

于 2012-06-26T14:12:50.543 に答える
6

これが良いか悪いかはわかりませんが…

モデルビュー内で url() を組み立てました。

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

次に、通常どおり画像をデータバインドできます。

data-bind="style: { 'background-image': image }"
于 2012-09-26T18:54:37.210 に答える
3

これは私の例です。常に使用する

<div data-bind="foreach: items">
    <div class="box" data-bind="style: {'backgroundImage': 'url('+ image +')'}"></div>
</div>
于 2015-09-13T16:45:08.673 に答える