¿Cómo usar los enlaces de datos de estilo?

Question

Tengo dificultades para lograr que el enlace de estilo funcione en 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> 

El resultado de la prestación de esta plantilla es:

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

Puede alguien ayudarme a averiguar por qué todos los estilos que son dependientes del modelo de vista no aparecen?

Answer 1

Si x y y son observables, entonces es necesario que especifique así:

<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 utiliza un observable en una expresión, entonces tiene que ser especificado con(), ya que ganó' t se desenvuelve automáticamente.

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

Answer 2

Esto no es una respuesta directa, pero busqué en Google en esta página durante la investigación. Tenía algo como esto:

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

donde src es un valor en mi modelo de objetos como "http://image.com/foo.jpg". Especificación de src en función como en la respuesta anterior no ayudó:

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

He descubierto que si el valor src no es válida propiedad background-imagen, se ignora por completo.

tuve que usar:

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

salve a alguien algo de dolor en algún momento :)