KO Computed no actualiza la IU

Todavía soy bastante nuevo para nocaut y estoy tratando de mostrar y ocultar tabs de arranque usando knockout.

básicamente tengo un observable computable:

self.isActive = ko.computed(function () { var selected = ko.utils.arrayFirst(self.padParticipant(), function (item) { return item.ParticipationStatus == 'Active'; }); return selected !== null ? true : false; }); 

para actualizar estas tabs:

 <ul class="nav nav-tabs" id="padTabs"> <li data-bind="fadeVisible: !isActive()"><a href="#joinPad">Join PAD</a></li> <li class="active"><a href="#history">History</a></li> <li data-bind="fadeVisible: isActive()"><a href="#update">Update Subscription</a></li> </ul> 

El cálculo funciona correctamente en el sentido de que cuando actualizo la página, las tabs correctas están ocultas, pero necesito que funcione sin refrescarme.

El problema tiene que ver con la comprensión de lo que está sucediendo en el marco Knockout cuando se utilizan observables computados, además de las reglas de las matrices observables. Primero veamos una nota sobre arreglos observables:

Punto key: un Array observable rastrea qué objects están en la matriz, no el estado de esos objects

Simplemente colocar un object en un array observable no hace que todas las properties de ese object sean observables. Por supuesto, puede hacer que esas properties sean observables si lo desea, pero esa es una opción independiente. Un Array observable solo rastrea qué objects contiene y notifica a los oyentes cuando se agregan o eliminan los objects.

Este es el mismo error de precaución que está cometiendo en esta línea de código, ya que no se trata de un elemento observable, más bien de una propiedad de un object en la matriz ,: return item.ParticipationStatus == 'Active';

Además, debemos entender cómo funciona un observable calculado:

  1. Siempre que declare un observable calculado, KO invoca inmediatamente su function de evaluador para get su valor inicial.

  2. Mientras se ejecuta su function de evaluador, KO mantiene un logging de los observables (o observables calculados) que su evaluador lee el valor de.

  3. Cuando su evaluador finaliza, KO establece suscripciones a cada uno de los observables (o observables calculados) que ha tocado . La callback de suscripción está configurada para hacer que su evaluador se ejecute nuevamente, volviendo a pasar todo el process al paso 1 (descartando cualquier suscripción anterior que ya no se aplique).

  4. KO notifica a cualquier suscriptor sobre el nuevo valor de su observable calculado.

Por lo tanto, cuando hizo su observable calculado, la única suscripción que se creó para observar los cambios fue uno para la matriz observable self.padParticipant() .

Dado que el cambio de estado de la interfaz de usuario depende del cambio del estado de ParticipationStatus , esto significa que esta propiedad debe ser un elemento observable dentro de cada object en la matriz; de lo contrario, cuando cambie el estado, no habrá forma de que el computador tenga conocimiento de ese cambio y actualiza la interfaz de usuario.