Durandal JS nokaut Odroczone aktualizacje

Question

Występuje problem przy włączaniu odroczonych aktualizacji w bibliotece nokautów. Zaimplementowałem Jquery jako komponent, podczas nawigacji do widoku, który ma ten komponent, widzę następujące metody wywoływane w kolejności. Getview> Uaktywnij> Dołącz

wszystko działa zgodnie z oczekiwaniami

ale gdybym naciśnij F5 i odśwież stronę zamiast przechodząc do niego z innej strony to przerwą i następujące metody nazywane są

Getview> Activate > Dołącz> Getview> Aktywuj> Dołącz> Odłącz> Odłącz (nie wiesz, dlaczego jest wywoływany dwukrotnie na końcu) i zepsuje się, w ogóle nie wyświetla się w interfejsie, ponieważ nie renderuje się z tego, co mogę powiedzieć, myślę, że ma coś wspólnego z durandalnymi przejściami i istnieje różnica między nawigacją do strony a odświeżaniem strony, którą chwyta się za słomkę.

Jest to minimalna klasa, która replikuje problem dla mnie, trzeba pamiętać, nie mam plik HTML dla tego komponentu Chcę użyć metody getView przejść w jakiś dynamiczny HTML z JQueryDT

stworzyłem krótki próbkę projekt z minimalnym minimum potrzebnym do odtworzenia problemu. https://bitbucket.org/dchosking1988/deferred-update-example

Jeśli ciągnąć to i uruchomić go widać, że „Hello World” zniknie po odświeżeniu strony, ale to przyzwyczajenie, jeśli nawigacja między kartami.

ogólne kroki użyłem do powtórzenia problemu są

1) Pobierz przykładowy projekt

2) dodać składnik TEST (patrz repo powyżej dla przykładowego pliku)

3) umożliwienia odroczonego aktualizacje

4) wyłączyć buforowanie widok

4) spróbować skomponować nową instancję komponentu

Edits dać więcej info

* To nie jest JQuery DataTable problem, to są replikowane z następującym

więc nie musisz pobrać gitRepo, jest to kod mogę powtórz problem w przykładowym projekcie, wykonując powyższe kroki.

define([], 
function() { 
    var test = function() { 
     var self = this; 

     var defaultViewHtml = '<div> <h1>Hello World</h1></div>'; 
     var currentView = null; 

     self.getView = function() { 
      console.log('GetView'); 
      if (!currentView) { 
       currentView = $(defaultViewHtml)[0]; 
      } 
      return currentView; 
     }; 

     self.activate = function (activateOptions) { 
      console.log('Activate'); 
     }; 

     self.attached = function (view, parent, settings) { 
      console.log('Attatched'); 
     }; 

     self.detached = function (view, parent) { 
      console.log('Detatched'); 
     }; 
    }; 

    return test; 
}); 

następnie dodaj ten kod HTML do index.html, także nie zapomnij utworzyć instancję klasy w index.js

<div class="whiteRow"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div data-bind="compose: { model: test }"></div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

to doszło, ponieważ wywołać kod dwa razy i drugi o nazwie currentView pozostaje pusty w test.js, skomentowałem odcinek, w którym ustawiono działanie currentView i kod.

self.getView = function() { 
       console.log('GetView'); 
       //if (!currentView) { 
       // currentView = $(defaultViewHtml)[0]; 
       //} 
       return currentView; 
       }; 

-

<div class="whiteRow"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div data-bind="compose: { model: test }"></div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 2

define([], 
function() { 
var test = function() { 
    var self = this; 

    var defaultViewHtml = '<div> <h1>Hello World</h1></div>'; 
    var currentView = null; 

    self.getView = function() { 
      console.log('GetView'); 
      return currentView; 
      }; 

    self.activate = function (activateOptions) { 
     console.log('Activate'); 
    }; 

    self.attached = function (view, parent, settings) { 
     console.log('Attatched'); 
    }; 

    self.detached = function (view, parent) { 
     console.log('Detatched'); 
    }; 
    }; 

    return test; 
}); 

currentView pozostać pusta w test.js,