带挖空的背景绑定

Question

我有以下敲除绑定...

       <ul class="list-group" data-bind="foreach: $parent.levels">
            <li class="list-group-item">
                <img alt="level" class="pic" data-bind="attr:{src: '../../Content/images/levels/' + $index() + '.png'}" />
                <button class="btn btn-default piclabels" data-bind="click:$parent.startingLevel.bind($parent,$index()),text:$data,css:{active:$parent.startingLevel() == $index()}"></button>
            </li>
        </ul>

我想删除 img 标签，而是将背景图像应用于按钮。我已经在整个网络上尝试了多个示例，包括来自 knockout 的示例，但我无法让它工作。

data-bind="style: {background: 'url('../../Content/images/levels/' + $index() + '.png')' repeat-none left}"

我做错了什么？

Answer 1

使用 style 绑定时，每个样式都需要 return 一个字符串作为整个值。因此，如果您在 url 中使用单引号，则需要使用反斜杠 \ 对它们进行转义。而不是 repeat-none，我认为你打算使用 no-repeat。

data-bind="style: {background: 'url(\'../../Content/images/levels/' + $index() + '.png\') no-repeat left' }"

JsFiddle

带挖空的背景绑定

background binding with knockout

javascript

knockout.js