2011-10-14 7 views
14

Tengo una serie de casillas de verificación y quiero recopilar la seleccionada. Las casillas de verificación están en div de y cuando se hace clic en el div la casilla de verificación debe ser evaluada, así:La propiedad KnockoutJS no se actualiza al cambiar el valor con Jquery

var oCheckBox = $($(this).find('.chkSocialMediaItem').get(0)); 
oCheckBox.attr('checked', !$(oCheckBox).attr('checked')); 

Esto funciona muy bien, pero KnockoutJS no recoge el cambio y por lo tanto no actualizar mi contador en el seleccionado artículos.

Leo en algún lugar que necesita para desencadenar el evento de cambio. Pero cuando escucho el evento de cambio en la casilla, realmente se dispara.

Cualquier ayuda sería apreciada, Gracias!

Actualización:

He encontrado una solución 'nocaut'. En mi div hice una técnica de rem el 'clic' y cambia el valor comprobado en esa función:

<script type="text/html" id="Template"> 
    <div class="item" data-bind="click: DivClicked"> 
     <input type="checkbox" data-bind="checked: IsASelectedItem" class="chkSocialMediaItem"/> 
    </div> 
</script> 


function SocialMediaSearchItem() {   
      this.IsASelectedItem = ko.observable(); 
      this.DivClicked = function() { 
       this.IsASelectedItem(!this.IsASelectedItem()); 
      }; 
} 

Es esta la única solución? Me gustaría que 2 también vean una solución de Jquery.

Respuesta

11

El enlace checked solo escucha el evento click. La activación manual del evento click finaliza la desincronización de la caja cuando se establece el valor real verificado.

La forma preferida de establecer el valor es actualizar el valor de su modelo de vista, como lo hizo en su segundo ejemplo anterior.

Sin embargo, si está usando 1.3beta, entonces hay una manera fácil de conectar un elemento con sus datos correspondientes usando la API ko.dataFor. Se vería algo como:

var oCheckBox = $('.chkSocialMediaItem'), 
     data = ko.dataFor(oCheckBox[0]); 
     data.selectedItem(!data.selectedItem()); 
+0

¡Gracias por la respuesta rápida! Comprobaré el lunes beta cuando estoy de vuelta en el trabajo :) –

+0

Oh, eso es útil, ¿alguna idea de cómo saber a qué 'propiedad' se aplica un control, así como a viewModel? –

+0

Actualmente, no hay una forma de hacerlo, aparte de analizar el atributo 'data-bind' usted mismo y luego usar el nombre de la propiedad con los datos (' data ['somePropertyName'] ') –

12

me encontré con el mismo problema ... Aunque me hizo encontrar una solución que funcionó para mí que difiere de la publicada por @RP Niemeyer, por lo que pensé que iba a publicar se .

Knockout Version: 1.2.1 - (knockout-1.2.1.js)

Para desactive la casilla de verificación vinculado por golpe de gracia que utilizan los siguientes

$('YourCheckBoxHere').removeAttr('checked'); 
$('YourCheckBoxHere').triggerHandler('click'); 

para comprobar la casilla de verificación vinculado por Knockout he utilizado los siguientes

$('YourCheckBoxHere').attr('checked', 'true'); 
$('YourCheckBoxHere').triggerHandler('click'); 

Con suerte, si el otro trabajo ni de solución, tal vez esto =) ... desperdicia aproximadamente 3 horas sobre este tema.

Cuestiones relacionadas