Come cancellare / rimuovere associazioni osservabili in Knockout.js?

Sto creando funzionalità su una pagina web che l'utente può eseguire più volte. Attraverso l'azione dell'utente, un oggetto / modello viene creato e applicato all'HTML utilizzando ko.applyBindings ().

L'HTML associato ai dati viene creato tramite modelli jQuery.

Fin qui tutto bene.

Quando ripeto questo passaggio creando un secondo oggetto / modello e chiamo ko.applyBindings () incontro due problemi:

1. Il markup mostra l'oggetto / modello precedente così come il nuovo oggetto / modello.
2. Si verifica un errore javascript relativo a una delle proprietà nell'oggetto / modello, sebbene sia ancora visualizzato nel markup.

Per aggirare questo problema, dopo il primo passaggio chiamo .empty () di jQuery per rimuovere l'HTML basato su modelli che contiene tutti gli attributi di data-bind, in modo che non sia più nel DOM. Quando l'utente avvia il processo per il secondo passaggio, l'HTML associato ai dati viene nuovamente aggiunto al DOM.

Ma come ho detto, quando l'HTML viene aggiunto di nuovo al DOM e ricollegato al nuovo oggetto / modello, include ancora i dati dal primo oggetto / modello e ricevo ancora l'errore JS che non si verifica durante il primo passaggio.

La conclusione sembra essere che Knockout mantiene queste proprietà associate, anche se il markup viene rimosso dal DOM.

Quindi quello che sto cercando è un mezzo per rimuovere queste proprietà associate da Knockout; dicendo a knockout che non esiste più un modello osservabile. C'è un modo per fare questo?

MODIFICARE

Il processo di base è che l'utente carica un file; il server risponde quindi con un oggetto JSON, l'HTML associato ai dati viene aggiunto al DOM, quindi il modello di oggetti JSON viene associato a questo HTML utilizzando

mn.AccountCreationModel = new AccountViewModel(jsonData.Account);
ko.applyBindings(mn.AccountCreationModel);

Una volta che l'utente ha effettuato alcune selezioni sul modello, lo stesso oggetto viene postato di nuovo sul server, l'HTML associato ai dati viene rimosso da allora DOM, e quindi ho il seguente JS

mn.AccountCreationModel = null;

Quando l'utente desidera farlo ancora una volta, tutti questi passaggi vengono ripetuti.

Temo che il codice sia troppo "coinvolto" per fare una demo jsFiddle.

Hai provato a chiamare il metodo del nodo pulito di knockout sul tuo elemento DOM per eliminare gli oggetti associati alla memoria?

var element = $('#elementId')[0]; 
ko.cleanNode(element);

Quindi applicare nuovamente le associazioni knockout solo su quell'elemento con i nuovi modelli di visualizzazione aggiornerà l'associazione della vista.

Per un progetto su cui sto lavorando, ho scritto una semplice ko.unapplyBindingsfunzione che accetta un nodo jQuery e il booleano di rimozione. Innanzitutto svincola tutti gli eventi jQuery poiché il ko.cleanNodemetodo non se ne occupa. Ho testato per perdite di memoria e sembra funzionare bene.

ko.unapplyBindings = function ($node, remove) {
    // unbind events
    $node.find("*").each(function () {
        $(this).unbind();
    });

    // Remove KO subscriptions and references
    if (remove) {
        ko.removeNode($node[0]);
    } else {
        ko.cleanNode($node[0]);
    }
};

Potresti provare a utilizzare l'associazione che offre knockout: http://knockoutjs.com/documentation/with-binding.html L'idea è di utilizzare le associazioni una volta e ogni volta che i tuoi dati cambiano, aggiorna il tuo modello.

Supponiamo che tu abbia un modello di visualizzazione di primo livello storeViewModel, il tuo carrello rappresentato da cartViewModel e un elenco di articoli in quel carrello, ad esempio cartItemsViewModel.

Assoceresti il ​​modello di primo livello, storeViewModel, all'intera pagina. Quindi, puoi separare le parti della tua pagina che sono responsabili del carrello o degli articoli del carrello.

Supponiamo che cartItemsViewModel abbia la seguente struttura:

var actualCartItemsModel = { CartItems: [
  { ItemName: "FirstItem", Price: 12 }, 
  { ItemName: "SecondItem", Price: 10 }
] }

Il cartItemsViewModel può essere vuoto all'inizio.

I passaggi sarebbero simili a questo:

1. Definisci le associazioni in html. Separare l'associazione cartItemsViewModel.

     
       <div data-bind="with: cartItemsViewModel">
         <div data-bind="foreach: CartItems">
           <span data-bind="text: ItemName"></span>
           <span data-bind="text: Price"></span>
         </div>
       </div>
     
   

2. Il modello di negozio proviene dal tuo server (o viene creato in qualsiasi altro modo).

   var storeViewModel = ko.mapping.fromJS(modelFromServer)

3. Definisci modelli vuoti sul tuo modello di visualizzazione di primo livello. Quindi una struttura di quel modello può essere aggiornata con i dati effettivi.

     
       storeViewModel.cartItemsViewModel = ko.observable();
       storeViewModel.cartViewModel = ko.observable();
    
   

4. Associa il modello di visualizzazione di primo livello.

   ko.applyBindings(storeViewModel);

5. Quando l'oggetto cartItemsViewModel è disponibile, assegnalo al segnaposto definito in precedenza.

   storeViewModel.cartItemsViewModel(actualCartItemsModel);

Se desideri cancellare gli articoli del carrello: storeViewModel.cartItemsViewModel(null);

Knockout si occuperà di html - cioè apparirà quando il modello non è vuoto e il contenuto di div (quello con il "with binding") scomparirà.

Devo chiamare ko.applyBinding ogni volta che si fa clic sul pulsante di ricerca ei dati filtrati vengono restituiti dal server, e in questo caso seguendo il lavoro per me senza utilizzare ko.cleanNode.

Ho sperimentato, se sostituiamo foreach con un modello, dovrebbe funzionare bene in caso di collezioni / osservableArray.

Potresti trovare utile questo scenario.

<ul data-bind="template: { name: 'template', foreach: Events }"></ul>

<script id="template" type="text/html">
    <li><span data-bind="text: Name"></span></li>
</script>

Invece di utilizzare le funzioni interne di KO e occuparsi della rimozione del gestore di eventi blanket di JQuery, un'idea molto migliore è usare witho le templateassociazioni. Quando si esegue questa operazione, ko ricrea quella parte di DOM e quindi viene automaticamente pulita. Questo è anche un modo consigliato, vedere qui: https://stackoverflow.com/a/15069509/207661 .

Penso che potrebbe essere meglio mantenere l'associazione per tutto il tempo e aggiornare semplicemente i dati ad essa associati. Mi sono imbattuto in questo problema e ho scoperto che solo chiamando utilizzando il.resetAll() metodo sull'array in cui stavo mantenendo i miei dati era il modo più efficace per farlo.

Fondamentalmente puoi iniziare con alcune variabili globali che contengono dati da visualizzare tramite ViewModel:

var myLiveData = ko.observableArray();

Mi ci è voluto un po 'per capire che non potevo semplicemente creare myLiveDataun array normale: la ko.oberservableArrayparte era importante.

Quindi puoi andare avanti e fare quello che vuoi myLiveData. Ad esempio, effettua una $.getJSONchiamata:

$.getJSON("http://foo.bar/data.json?callback=?", function(data) {
    myLiveData.removeAll();
    /* parse the JSON data however you want, get it into myLiveData, as below */
    myLiveData.push(data[0].foo);
    myLiveData.push(data[4].bar);
});

Dopo averlo fatto, puoi andare avanti e applicare le associazioni usando il tuo ViewModel come al solito:

function MyViewModel() {
    var self = this;
    self.myData = myLiveData;
};
ko.applyBindings(new MyViewModel());

Quindi nell'HTML usalo myDatacome faresti normalmente.

In questo modo, puoi semplicemente fare il muck con myLiveData da qualsiasi funzione. Ad esempio, se vuoi aggiornare ogni pochi secondi, racchiudi quella $.getJSONriga in una funzione e chiamala setInterval. Non avrai mai bisogno di rimuovere l'associazione fintanto che ti ricordi di mantenere il filemyLiveData.removeAll(); linea.

A meno che i tuoi dati non siano davvero enormi, l'utente non sarà nemmeno in grado di notare il tempo che intercorre tra il ripristino dell'array e quindi l'aggiunta dei dati più recenti.

Recentemente ho avuto un problema di perdita di memoria e ko.cleanNode(element);non l'avrei fatto per me - sì ko.removeNode(element);. Javascript + Knockout.js memory leak - Come assicurarsi che l'oggetto venga distrutto?

Hai pensato a questo:

try {
    ko.applyBindings(PersonListViewModel);
}
catch (err) {
    console.log(err.message);
}

Ho pensato a questo perché in Knockout ho trovato questo codice

    var alreadyBound = ko.utils.domData.get(node, boundElementDomDataKey);
    if (!sourceBindings) {
        if (alreadyBound) {
            throw Error("You cannot apply bindings multiple times to the same element.");
        }
        ko.utils.domData.set(node, boundElementDomDataKey, true);
    }

Quindi per me non è davvero un problema che sia già vincolato, è che l'errore non è stato individuato e risolto ...

Ho scoperto che se il modello di visualizzazione contiene molti collegamenti div, il modo migliore per cancellarli ko.applyBindings(new someModelView);è quello di usarlo: ko.cleanNode($("body")[0]);questo ti consente di chiamare un nuovo ko.applyBindings(new someModelView2);dinamicamente senza la preoccupazione che il modello di visualizzazione precedente sia ancora associato.