Asegúrese de que el enlace ciego se procese primero

Tengo una tabla creada a partir de una matriz observable. Las filas de la tabla contienen elementos que pertenecen a cada uno de un conjunto de categorías. Para filtrar la tabla en función de las categorías, hay una fila de botones.

Los botones pueden estar activos o inactivos, lo que se indica a través de una clase CSS enlazada a través de un knockout:

<button data-bind="click: filter.filterCategory, css: { filterOn: filter.category.isFiltered() }">Filter</button>

El filtrado dentro de la tabla se realiza cambiando el estado de visualización de las filas:

<tr data-bind="css: { nonDisplay: !table.category.isDisplayed() }">
</tr>

El controlador de clic establece principalmente los valores de los dos observables, en secuencia, por ejemplo

vm.filter.category.isFiltered(true);

vm.table.category.isDisplayed(false);

Esto funciona en principio.

El problema es que la indicación de que el botón de filtrado ha sido seleccionado por el usuario no se da inmediatamente, sino que depende del tiempo de ejecución del propio filtrado, es decir, de los cambios en la tabla.

Con mesas más grandes, y especialmente en dispositivos móviles, esto puede significar retrasos de un par de segundos.

Puedo vivir con el filtrado en sí tomando tanto tiempo, pero la retroalimentación debe ser inmediata.

¿Hay alguna manera de garantizar que el cambio en vm.filter.category.isFiltered se aplica antes del cambio de mayor duración basado en vm.table.category.isDisplayed ¿Está empezado?

preguntado el 08 de febrero de 14 a las 12:02

1 Respuestas

Esto parece un error asíncrono. Debe implementar un parámetro de método de devolución de llamada en el método isFiltered, algo como esto

var vm = vm || {};
vm.filter = vm.filter || {};

vm.filter.category = (function($){
    var that = this;

    that.isFiltered = function(booleanValue, callback) {

            // Put your primary code here
        console.log("this runs first");

            // ...when the first code is done 
        callback();

    };

    that.isDisplayed = function(booleanValue) {
        console.log("this runs second");
    };

    return that;
})($);

// Implement by stating a method as the second parameter.
vm.filter.category.isFiltered(true, function(){ vm.filter.category.isDisplayed(false); });

Esto rendirá

// this runs first
// this runs second

Respondido 08 Feb 14, 13:02

No lo entiendo, ¿cuál es la diferencia entre configurar los dos observables secuencialmente y esto? (Fui con una solución de tiempo de espera antes de leer esto, y no quiero reestructurar mi código nuevamente para intentarlo). - gzost

@gzost Bueno, un tiempo de espera solo funcionará si su contenido se recarga/reconstruye dentro del tiempo real que estableció. ¡El patrón anterior admite la carga asíncrona y probablemente debería leer un poco más sobre eso si está usando knockout! :) - eric herlitz

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.