如何使用样式数据绑定？

Question

我在让样式绑定在 KnockoutJS 中工作时遇到困难。

<script id="avatarTemplate" type="text/x-jquery-tmpl">
  <div id="avatar_${id}" class="avatar" data-bind="style: 
    { background: s, width: '50px', height: '85px', left: (x + 'px'), top: 
    (y + 'px') }">${s}, ${x}, ${y}</div> 
</script> 

<div data-bind="template: { name: 'avatarTemplate', foreach: avatars }"></div> 

这个模板的渲染结果是：

<div id="avatar_1" class="avatar" style="width: 50px; height: 85px;">avatar.png, 0, 0</div> 

谁能帮我弄清楚为什么所有依赖于视图模型的样式都没有显示出来？

Answer 1

如果x 和y 是可观察的，那么你需要像这样指定它：

<div id="avatar_${id}" class="avatar" data-bind="style: 
    { background: s, width: '50px', height: '85px', left: (x() + 'px'), top: 
    (y() + 'px') }">${s}, ${x}, ${y}</div> 

如果在表达式中使用 observable，则需要用 () 指定它，因为它不会自动解包。

http://jsfiddle.net/rniemeyer/6GtV3/

Answer 2

这不是一个直接的答案，但我在调查时搜索了这个页面。我有这样的事情：

<div data-bind="style: { backgroundImage: src }">

其中src 是我的模型对象中的一个值，例如“http://image.com/foo.jpg”。将 src 指定为上述答案中的函数没有帮助：

<div data-bind="style: { backgroundImage: src() }">

我发现如果src 值不是有效的背景图像属性，它会被完全忽略。

我不得不使用：

<div data-bind="style: { backgroundImage: 'url(\'' + src() + '\'' }">

可能会在某个时候为某人减轻一些痛苦:)