knockout.js – 如何使用样式数据绑定?

前端之家收集整理的这篇文章主要介绍了knockout.js – 如何使用样式数据绑定?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在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</div>

任何人都可以帮我弄清楚为什么所有依赖于视图模型的样式都没有显示出来?

解决方法

如果x和y是可观察的,那么你需要像这样指定它:
<div id="avatar_${id}" class="avatar" data-bind="style: 
    { background: s,left: (x() + 'px'),top: 
    (y() + 'px') }">${s},${y}</div>

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

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

原文链接:https://www.f2er.com/js/156302.html

猜你在找的JavaScript相关文章