Pequeno truque bacana do ko.observableArray

Os arrays observáveis ​​do Knockout são uma ótima maneira de manter um array de dados para tabelas, listas e caixas de seleção. Porém, a manipulação dessa matriz pode resultar em muitas assinaturas nocaute sendo disparadas e pode resultar em uma carga na IU. Imagine o seguinte código simples:

var array = ko.observableArray([]);
for(var i=0; i<100; i++) {
    array.push(i);
}

O que acontecerá nesta instância é que, para cada iteração, as ligações de knockout serão atualizadas. Isso significa que acabaremos com 100 atualizações nas ligações. Agora imagine que, além da vinculação da interface do usuário, você tem uma assinatura separada para o knockout observável usando array.subscribe (function (value) {}) ;. Isso significa que, em cada iteração, 2 assinaturas separadas estão sendo chamadas.

Isso pode ser bom, mas também pode sobrecarregar o aplicativo. Considere esta alternativa:

var array = ko.observableArray([]);
for (var i=0; i<100; i++) {
    array().push(i);
}

array.notifySubscribers(array());

O que acontecerá agora é que, em vez de disparar 100 assinaturas, ele apenas notificará os assinantes uma vez. Deve-se notar que, ao fazer este knockout, estaremos desembrulhando o observável 100 vezes, o que deveria acontecer de qualquer maneira, estamos apenas adiando a chamada para notificar os assinantes até depois de atualizarmos o array. Outra alternativa é:

var array = ko.observableArray([]);
var tempArray = ko.utils.unwrapObservable(array);
for (var i=0; i<100; i++) {
    tempArray.push(i);
}

array(tempArray);

Isso terá basicamente o mesmo efeito, mas requer uma variável adicional. Embora meus exemplos não sejam muito complicados, quando há muitos dados nos arrays, isso realmente começa a fazer a diferença. Isso também significa que a IU só será atualizada depois que todos os dados forem adicionados ao array. Incidentalmente, o mesmo funcionará para pop / shift / unshift / splice / slice também.

Assim como um knockout à parte nem sempre sabe quando os elementos do array foram atualizados (a menos que você use splice),
array.notifySubscribers (array ());
permitirá que você notifique os assinantes dos arrays sobre os valores atualizados.