Как я могу связать свойство CSS-фонового изображения?

StackOverflow https://stackoverflow.com/questions/9303470

Вопрос

Можно ли сделать привязку стиля к фоновому изображению?

Я попробовал этот код:

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

я тоже попробовал backgroundImage, без кавычек в url, без : после url, но он все еще не работает.Все остальные, как color или backgroundColor привязки работают отлично.

Это было полезно?

Решение

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

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

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

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

Другие советы

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

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

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

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

В модели зрения

self.imageUrl = ko.observable();

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

В HTML

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

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

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

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

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

Вам не нужен : в 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/

Или просто объединить

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

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

Значение, которое должно быть установлено на любое свойство в KO, является значением свойства ViewModal.

где есть свойства ocepath = viewmodal, это путь к вашему фоновому изображению.

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

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

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

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

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

Когда вы говорите: Data-Bind: «{... что-то ...}« Вы должны понять, что вы находитесь внутри JavaScript. Если вы пишете: изображение фона, он пытается вычесть изображение из фона (фоновое изображение). Это неопределенные переменные. Тогда это намного яснее.

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top