11

Quisiera saber cómo detectar el cambio en la propiedad de un objeto observable en una grilla al seleccionar un checkbox con knockoutjs. El código que actualmente tengo es de esta forma.

<div data-bind="kendoGrid:{data: asignados, columns:columns}"></div>

<script type="text/javascript>
var RecursosVm = function () {
var self = this;
self.columns = [
    {
        title   : "",
        field   : "isChecked",
        template: "<input type='checkbox' data-bind='checked: checkedAlert'/>"
    },
    { title: "Código", field: "reC_CLIENTKEY" },
    { title: "Nombre", field: "reC_NOMBRE_COMPLETO" }
];
self.asignados = ko.observableArray([]);
self.disponibles = ko.observableArray([]);
self.checkedAlert = function() {
    //aqui deberia capturar el objeto
};
self.moverDisponibles = function() {
   //TODO:
}}

El problema es que al seleccionar el checkbox no cambia el valor del objeto ni dispara la función y de allí no hay forma de recuperar los objetos seleccionados.

2
  • ¿Qué es una grilla? lo siento pero grilla es polítiquería en el castellano que se habla en México Commented el 2 dic. 2015 a las 0:20
  • @Ruslan, parece que tendremos que acostumbrarnos con el español informatico internacional ;) Tampoco lo sé pero supongo que es grid
    – brasofilo
    Commented el 2 dic. 2015 a las 1:17

2 respuestas 2

4

El checked binding requiere un boolean o un observable de boolean para bindearlo al html

Si necesitas ejecutar una funcion al cambiar el valor del checkbox en la UI puedes crear un Writable computed observable para tal fin

self._checkbox = ko.observable(false); //o el valor por defecto que necesites
self.checkedAlert = ko.computed({
    read: function () {
        return this._checkbox();
    },
    write: function (value) {
        //TODO: Acá va lo que quieres ejecutar cuando se cambia el valor del checkbox
        this._checkbox(value);
    },
    owner: self
});
3
  • 2
    El que votó en contra se puede dignar de explicar? Commented el 1 dic. 2015 a las 22:06
  • 1
    No entiendo por qué votan en contra, la respuesta no me parece para nada mala. Estamos en beta privada, no deberían de pasar estas cosas. Voto a favor para eliminar el efecto negativo del -1 y porque me parece una buena respuesta. Commented el 2 dic. 2015 a las 1:55
  • Lo más natural para este caso es usar el método <observable>.subscribe(function (value) {}) o plantearse: ¿cuál es el motivo para engancharse al evento checked? Es muy probable que el problema se pueda expresar ampliando el modelo con un computed con un sentido lógico. El computed que planteas, Carlos, no tiene un sentido diferente al propio valor del checked (el contra ejemplo sería el caso b) en mi respuesta). Commented el 4 dic. 2015 a las 0:15
2

Problema y solución

Has confundido un evento de tipo checked con el enlace a datos o binding de tipo checked. El binding de Knockout requiere una expresión de tipo Observable o un valor estático, no una función que gestiona un evento.

<input type='checkbox' data-bind='checked: <expresión>'/>

En este caso has de definir un observable para cada recurso que represente el estado de estar seleccionado y enlazar la interfaz con él:

...
self.isChecked = ko.observable(valorInicial);
...

<input type='checkbox' data-bind='checked: isChecked'/>

Dependiendo de lo que debas hacer cuando se alterne el checkbox, puede tener sentido subscribirte al cambio (a) o ampliar tu modelo con un computed que dependa de los distintos observables isChecked, si esto encaja en tus necesidades. Por ejemplo:

a) Método subscribe

self.isChecked.subscribe(function (value) {
    // Ojo: se dispara siempre al cambiar de estado...
    console.log((value ? 'seleccionado' : 'deseleccionado') + '(' + self.clave() + ')');
    // Salida: 
    // seleccionado(123)       // Al seleccionar
    // deseleccionado(123)     // Al deseleccionar
});

b) Computed

// Si queremos mostrar cuántos recursos están seleccionados
self.numSeleccionados = ko.computed(function () {
    return self.asignados().filter(function (e) {
            return e.isChecked();
        }).length;
});

Ejemplo:

En este fiddle hay un ejemplo concreto.

Nota:

Realmente, la utilización del KendoGrid o un foreach de Knockout es indiferente en este caso.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.