Как я могу выполнить привязку нокаута к URL-адресу backgroundImage?

У меня есть наблюдаемый массив с

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>

Как я могу это достичь?

Ответ 1

Вам нужно объединить строки:

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

Если image на самом деле является наблюдаемым, вам нужно будет его вызвать, иначе вы в конечном итоге соедините функцию.

Обратите внимание, что поскольку вы привязываетесь к выражению, включающему свойство, вы должны вызвать функцию (с помощью ()). В противном случае вы получите выражение Javascript, которое объединяет сама функция.
Единственной причиной, по которой вам не нужно () для простых привязок, является то, что Knockout обнаруживает, когда привязка возвращает функцию свойства и вызывает ее для вас.

Ответ 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 }"

Ответ 3

это мой пример. Всегда используйте его

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