Comment utiliser le style de liaisons de données?

Je vais avoir des difficultés pour obtenir le style de liaison de travail 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 m'aider à comprendre pourquoi tous les styles qui sont dépendants sur le modèle de vue ne s'affichent pas?

InformationsquelleAutor fadedbee | 2011-06-15
  1. 19

    Si x et y sont observables, alors vous devez le 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 un observables dans une expression, puis il besoin d'être spécifié par (), comme il ne sera pas déballé automatiquement.

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

    • Ahh, je me demandais comment faire KnockoutJS concaténation.. merci :o)
    • Mon dieu! Je viens de passer 30 minutes à essayer de comprendre ce! =D
    • Je vous remercie. Enregistrer mon temps trop
    • Génial. J'étais accéder x() et y() correctement, mais il n'a pas eu lieu pour moi que j'ai besoin d'ajouter les unités "px". Merci
    InformationsquelleAutor RP Niemeyer
  2. 1

    Ce n'est pas une réponse directe, mais j'ai googlé sur cette page lors de l'enquête. 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". La spécification de la src comme une fonction, comme dans la réponse ci-dessus n'aide pas:

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

    J'ai trouvé que si la src valeur n'est pas valide propriété background-image, il est complètement ignoré.

    J'ai eu à utiliser:

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

    Peut sauver quelqu'un de la douleur à un certain point 🙂

    • Merci de prendre le temps! C'était exactement le cas d'utilisation que je cherchais!
    InformationsquelleAutor Neek