Estoy trabajando con una clase ListBox en Javascript y extendí una función jQuery para manejar el intercambio de elementos dentro de la lista.
Todo funciona como se esperaba cuando solo existe una instancia de ListBox. Sin embargo, tan pronto como se agregan más cuadros de lista, la extensión jQuery parece perder alcance en una variable de clase.
Básicamente, el DOM funciona como se esperaba (los elementos se intercambian visualmente), pero la función jQuery parece haber perdido el alcance de la matriz subyacente de la clase. Solo actualiza la matriz de la última instancia de ListBox
En el ejemplo del enlace jsFiddle, los elementos del segundo ListBox y la matriz se sincronizan adecuadamente hasta que se intercambia un elemento en el primer cuadro, luego todo comienza a perderse. También tenga en cuenta que la matriz de la primera instancia nunca cambia.
Puedo hacer que funcione usando 'esto' al declarar arItems, pero 'esto' no es aceptable porque no quiero exponer la matriz interna. Consideré usar una función de clase this.getList(), pero no creo que podamos hacer propiedades de solo lectura en javascript.
Lo que más me desconcierta es que los elementos jQuery parecen conocer muy bien el alcance... lo que significa que el intercambio en el primer cuadro no mueve los elementos en el segundo cuadro... y no habilita/deshabilita los botones de intercambio del 2da caja. Solo la matriz parece haber perdido alcance y se define con 'let', al igual que los elementos jQuery.
const ListBox = function(){ let $lbContainer = $('<div id="lb-container"></div'); let $lb = $('<div id="lb-col1" class="list-group"></div>'); let arItems = [1,2,3,4]; ... ... // jQuery extension $.fn.lbMove = function(bUp){ let $item = (bUp ? this.prev() : this.next()); // swap array items arItems[this.index()] = arItems.splice($item.index(), 1, arItems[this.index()])[0]; // swap list items if(bUp) $item.before(this) else $item.after(this) // button enablement this.click(); } }