Comment utiliser les liaisons de données de style?

Question

J'ai du mal à faire fonctionner la reliure de style dans 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> 

Le résultat de rendre ce modèle est:

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

Quelqu'un peut-il me aider à comprendre pourquoi tous les styles qui dépendent du modèle de vue ne se présentent pas?

Answer 1

Si x et y sont observables, alors vous devez spécifier comme ceci:

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

Si vous utilisez une observable dans une expression, il doit être spécifié avec(), comme il a gagné » t être déballé automatiquement.

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

Answer 2

Ce n'est pas une réponse directe mais je googlé sur cette page en enquêtant sur. J'ai eu quelque chose comme ceci:

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

où src est une valeur dans mon modèle d'objet comme « http://image.com/foo.jpg ». Spécification src en fonction que dans la réponse ci-dessus n'a pas aidé:

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

Je trouve que si la valeur src est pas une propriété background-image valide, il est complètement ignoré.

je devais utiliser:

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

pourrait sauver quelqu'un une certaine douleur à un moment donné :)