如何使用样式数据绑定? [英] How to use the style data bindings?

问题描述

我很难在KnockoutJS中使用样式绑定.

I'm having difficulties getting the style binding working in 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> 

有人可以帮助我弄清楚为什么没有显示所有依赖于视图模型的样式吗?

Can anyone help me figure out why all styles which are dependent on the view model do not show up?

推荐答案

如果x和y是可观察的，则需要这样指定:

If x and y are observables, then you need to specify it like this:

<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> 

如果在表达式中使用可观察对象，则需要使用()指定它，因为它不会自动展开.

If you use an observable in an expression, then it needs to be specified with (), as it won't get unwrapped automatically.

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

这篇关于如何使用样式数据绑定?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！