Можно ли создать привязку фона к изображению?
Я пробовал этот код:
<div data-bind="foreach: itemList">
<div data-bind="style: { background-image: 'url:(temp.png)' }">some text</div>
</div>
Я также пробовал backgroundImage, без кавычек в url, без : после url, но он все еще не работает. Все остальные, такие как привязки color или backgroundColor, работают отлично.
Как указано в documentation, вам нужно использовать имя Javascript для стиля, который вы хотите контролировать.
Это означает, что вам нужно использовать backgroundImage вместо background-image.
Что-то вроде этого:
<div data-bind="foreach: itemList">
<div data-bind="style: { backgroundImage: 'url(temp.png)' }">some text</div>
</div>
Я не уверен, почему все (кроме 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>
Вам не нужен : в разделе 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 >
Кстати, вы можете настроить пользовательскую привязку, чтобы сделать синтаксис менее громоздким:
ko.bindingHandlers.backgroundImage = {
update: function(element, valueAccessor) {
ko.bindingHandlers.style.update(element,
function(){return {backgroundImage: "url('" + valueAccessor() + "')"}});
}
};
Затем в вашем HTML вы можете сделать
<div data-bind="backgroundImage: image"></div>
или просто конкатенировать
<div data-bind="style: { backgroundImage: 'url(\'' + $data.videoImg + '\')' }"> </div>
Просто поместите кавычки (одинарные кавычки) вокруг имени свойства. когда у вас есть - в имени свойства, например. background-image или background-url вам нужно поставить кавычки вокруг имени
<div data-bind="style: {'background-image' : 'url(somepath)'}>
Это проблема. Упоминается в документации Knockout.
на основе документации KO,
VALUE для SET для любого свойства в KO является значением свойства ViewModal.
где somepath = Свойство ViewModal, которое является PATH для вашего фонового изображения.
Если есть два имени, используйте первое имя в нижнем регистре и первый символ второго имени в верхнем регистре. Примеры:
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
Когда вы скажете: data-bind: "{... somecode...}" вам нужно понять, что u находится внутри javascript. Если вы пишете: background-image, он пытается вычесть изображение из фона (background-image). Это переменные undefined. Тогда это намного яснее.
<div data-bind="style: { background: 'url(' + imageUrl + ')' }" ></div>
Вышеупомянутый, который я использовал, должен работать.
Если вы используете background: 'url(imageUrl)', он будет рассматривать только как строку.