Question

我正在使用knockout.js绑定li元素

按照以下方式：

<ul class="grid" data-bind="foreach: articledashboard">
    <li data-bind="style: { background-image: url(AuthorImage)}">
        <label data-bind="attr: { title: Title }, text: Title"></label>
    </li>
</ul>

我的要求是设置li元素的背景图片，但我的代码无效

你能给我正确的语法吗？

Answer 1

使用backgroundImage代替background-image，并将值设置为字符串：

<li data-bind="style: { backgroundImage: 'url(' + AuthorImage() + ')'}">

请参阅 documentation

修改

如RP Niemeyer所述，您还可以使用'background-image'：

<li data-bind="style: { 'background-image': 'url(' + AuthorImage() + ')'}">

请注意，这假设AuthorImage是可观察的。如果不是，请使用AuthorImage。

Answer 2

HTML：

<div style="width:100%;height:100%;"  
    data-bind='style:{ background: "url(" + image_url() + ") center/cover"} '
></div>

JS：

<script>
    function ViewModel(){
        var self = this;
        self.image_url = ko.observable("");
    }
</script>

如何在knockoutjs绑定中添加动态添加背景图像？

2 个答案: