Как связать свойство background-image CSS?

Ответ 1

Как указано в documentation, вам нужно использовать имя Javascript для стиля, который вы хотите контролировать.

Это означает, что вам нужно использовать backgroundImage вместо background-image.

Что-то вроде этого:

<div data-bind="foreach: itemList"> 
    <div data-bind="style: { backgroundImage: 'url(temp.png)' }">some text</div>
</div>

Ответ 2

Я не уверен, почему все (кроме Sujesh) отвечают на этот вопрос и все еще жестко кодируют temp.png. Если вы не привязываетесь к свойству ko.observable, тогда не используйте data-bind. Просто используйте стандартное свойство стиля элемента html.

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

Для привязки данных, чтобы получить URL-адрес, я хочу, чтобы ответ Sujesh Arukil работал у меня, но это не так. Если кто-то работает, пожалуйста, просветите меня.

Вот что сработало для меня, но меня это не волнует. Я использовал вычисление, чтобы получить значение фонового изображения.

В модели представления

self.imageUrl = ko.observable();

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

В HTML

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

Ответ 3

Вам не нужен : в разделе url для фонового изображения, это просто url(/foo.png).

В вашей привязке также нужно использовать background-image, поскольку это свойство стиля, но в кавычках, например (backgroundImage - это JavaScript API для стиля):

<div data-bind="style: { 'background-image': 'url(https://www.google.com/intl/en_com/images/srpr/logo3w.png)' }"></div>​

Демо-версия здесь - http://jsfiddle.net/slace/EgUaM/

Изменить После публикации примера Github начал испытывать проблемы с базой данных, поэтому здесь альтернативный jsfiddle - http://jsfiddle.net/slace/EgUaM/1/ p >

Ответ 4

Кстати, вы можете настроить пользовательскую привязку, чтобы сделать синтаксис менее громоздким:

ko.bindingHandlers.backgroundImage = {
  update: function(element, valueAccessor) {
    ko.bindingHandlers.style.update(element,
      function(){return {backgroundImage: "url('" + valueAccessor() + "')"}});
  }
};

Затем в вашем HTML вы можете сделать

<div data-bind="backgroundImage: image"></div>

Ответ 5

или просто конкатенировать

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

Ответ 6

Просто поместите кавычки (одинарные кавычки) вокруг имени свойства. когда у вас есть - в имени свойства, например. background-image или background-url вам нужно поставить кавычки вокруг имени

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

Это проблема. Упоминается в документации Knockout.

Ответ 7

на основе документации KO,

VALUE для SET для любого свойства в KO является значением свойства ViewModal.

где somepath = Свойство ViewModal, которое является PATH для вашего фонового изображения.

Ответ 8

Если есть два имени, используйте первое имя в нижнем регистре и первый символ второго имени в верхнем регистре. Примеры:

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

обратитесь к http://knockoutjs.com/documentation/style-binding.html и http://www.comptechdoc.org/independent/web/cgi/javamanual/javastyle.html

Ответ 9

Когда вы скажете: data-bind: "{... somecode...}" вам нужно понять, что u находится внутри javascript. Если вы пишете: background-image, он пытается вычесть изображение из фона (background-image). Это переменные undefined. Тогда это намного яснее.

Ответ 10

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

Вышеупомянутый, который я использовал, должен работать.

Если вы используете background: 'url(imageUrl)', он будет рассматривать только как строку.