2012-01-31 37 views
6

I utilizando knockout para el mapeo JSON obejct de control de usuario, tengo una lista de casillas de verificación individuales, Parecencheque nocaut/desmarcar todos cuadro combinado

<input type="checkbox" data-bind="checked: IsEnabled1" /> 

tengo JSONObject

var viewModel = { 
      IsEnabled1 :ko.observable(true),    
      IsEnabled2 :ko.observable(true), 
      IsEnabled3 :ko.observable(false) 
     }; 
    ... 
    ko.applyBindings(viewModel); 

Y quiero agregar una casilla de verificación global que marcará/desmarcará todas las demás, realicé estos cambios en el lado de JavaScript pero la parte de la IU de actualización del cuadro de verificación global pero los datos de las casillas de verificación separadas no se asignan al objeto JSON.

casilla de verificación Global

$("#GeneralTable thead tr th:first input:checkbox").click(function() { 
      var checkedStatus = this.checked; 
      $("#GeneralTable tbody tr td:first-child input:checkbox").each(function() { 
       this.checked = checkedStatus;      
      }); 

     }); 

después de este código objeto JSON mi contienen datos que no están relacionadas con la interfaz de usuario.

¿Cómo actualizar todas las casillas de verificación JSON después del cambio del lado de JS?

+1

El código que ha publicado no es suficiente para nosotros para responder tu pregunta. –

+0

Ahora debería ser mejor. Gracias. –

+1

Problema en su código, que interactúa con nodos. Pero necesitas interactuar con los datos. Es mejor en el mundo de MVVM :-) Compruebe mi respuesta. Creo que funcionará para ti. – Romanych

Respuesta

16

Por favor, compruebe el ejemplo: http://jsfiddle.net/MenukaIshan/5gaLjh2c/

Creo que es exactamente lo que necesita. Todos los artículos tienen IsChecked propiedad observable. ViewModel contiene observable calculado (legible y escribible) para marcar o desmarcar todos los elementos.

+0

Este es un ejemplo perfecto de uso. Hizo mi día dos veces! –

+0

Trabajando en código similar. Probé tu violín, pero en mi caso estoy usando knockout-3.2.0.js y no funciona (incluso en fiddle), pero trabajando con knockout-2.0.0.js. Cualquier pista. –

+0

3.2.4 no funciona en este –

2

Hay una solución alternativa aquí http://jsfiddle.net/rniemeyer/kXYuU/

La solución anterior se puede mejorar de dos maneras

-Para hacer AllChecked falsa para las listas vacías, necesitamos comprobar la longitud

-Para reducir el número de recálculos al seleccionar todo para una lista larga, tenemos que agregar acelerador

self.AllChecked = ko.computed({ 
    read: function() { 
     var firstUnchecked = ko.utils.arrayFirst(self.Items, function(item) { 
      return item.IsChecked() == false; 
     }); 
     return self.Items.length && !firstUnchecked; 
    }, 
    write: function(value) { 
     ko.utils.arrayForEach(self.Items, function(item) { 
      item.IsChecked(value); 
     }); 
    } 
}).extend({ throttle: 1 }); 
Cuestiones relacionadas