如何绑定CSS背景图像属性？
如何绑定CSS背景图像属性？
提问于 2012-02-16 07:50:47
有没有可能做一个样式的背景图像绑定？
我试过这段代码：
<div data-bind="foreach: itemList">
<div data-bind="style: { background-image: 'url:(temp.png)' }">some text</div>
</div>我也尝试了backgroundImage，在url中没有引号，在url之后没有:，但它仍然不起作用。所有其他的，像color或backgroundColor绑定都工作得很好。
回答 9
Stack Overflow用户
回答已采纳
发布于 2012-02-16 07:57:59
正如documentation中所述，您需要使用想要控制的样式的Javascript名称。
这意味着您必须使用backgroundImage而不是background-image。
如下所示：
<div data-bind="foreach: itemList">
<div data-bind="style: { backgroundImage: 'url(temp.png)' }">some text</div>
</div>Stack Overflow用户
发布于 2013-06-01 05:22:18
我不确定为什么每个人(除了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>Stack Overflow用户
发布于 2014-06-12 04:19:59
顺便说一句，您可以设置一个自定义绑定，使语法不那么笨拙：
ko.bindingHandlers.backgroundImage = {
update: function(element, valueAccessor) {
ko.bindingHandlers.style.update(element,
function(){return {backgroundImage: "url('" + valueAccessor() + "')"}});
}
};然后，在HTML中，您可以执行以下操作
<div data-bind="backgroundImage: image"></div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9303470
复制相关文章
相似问题