knockout.js - observablearray - knockout select value binding

Knockout-Usar foreach y ordenar juntos

Question

Estoy teniendo problemas para combinar el enlace foreach con una especie. Tengo una lista encuadernada como tal:

<article data-bind="foreach: widgets">  

Widgets es una simple matriz obviable:

var widgets= ko.observableArray();

Esto funciona bien dándome una lista de mis "widgets". Si agrego un nuevo "widget" a esta lista, entonces aparece dinámicamente en la lista a través del enlace de datos.

Sin embargo, tan pronto como agregué ordenación a la matriz:

<article data-bind="foreach: widgets.sort(function (left, right) { return left.order() == right.order() ? 0 : (left.order() < right.order() ? -1 : 1); })">

Luego, los widgets recién agregados ya no aparecen en mi lista, a menos que vuelva a cargar la página. (La clasificación funciona bien en este punto: si actualizo el campo "orden" en el que estoy clasificando, los elementos de mi lista se vuelven a clasificar dinámicamente).

¿Cómo puedo conseguir que la clasificación funcione bien con la actualización dinámica de nuevos elementos en mi matriz observable?

Estoy usando Breezejs para recuperar mis datos, sin embargo, no creo que esto tenga un impacto en este escenario.

Answer 1

observableArray.sort devuelve la matriz subyacente ordenada ("regular") y no un observableArray por eso los cambios no se muestran en la interfaz de usuario.

Para tener la clasificación y la interfaz de usuario actualizadas, debe crear un ko.computed que ko.computed la clasificación y utilice la computada en su enlace. Debido a que ko.computed escuchará los cambios en los widgets y recalculará la clasificación.

var widgets= ko.observableArray();

var sortedWidgets = ko.computed(function() {
   return widgets().sort(function (left, right) { 
        return left.order() == right.order() ? 
             0 : 
             (left.order() < right.order() ? -1 : 1); 
   });
});

Entonces puedes unirlo con:

<article data-bind="foreach: sortedWidgets" />