2012-03-22 26 views
9

Próbuję załadować i parsować dane json z zewnętrznego źródła do tabeli przez Knockout JS. Jak dotąd, wszystko udało się przez następujący kod:Lazy loading in Knockout JS

// Snippet 
    var self = this; 
    self.notices = ko.observableArray([]); 
    self.currentTab = ko.observable(5); 
    ko.computed(function() { 
     $.getJSON('http://json.source.here.com/tab/'+ko.toJS(self.currentTab), function(threads) { 
      if (threads !== null) { 
       self.notices(threads); 
      } else { 
       self.notices([]); 
      } 
     }); 
    }, self.notices); 

Gdy użytkownik kliknie na pewnym karcie byłoby załadować danych json (Włóczki forum) w zależności od wybranej wartości zakładki (self.currentTab) na tabela w formie wierszy (self.notices).

Wszystko działa zgodnie z oczekiwaniami, jednak zauważyłem podczas przeglądania innych stron, które nie mają powyższych powiązań, json wciąż jest ładowany ($ .getJSON jest uruchamiany). Obawiam się, że może to mieć jakiś szkodliwy wpływ na wydajność mojej strony internetowej, ponieważ ładuje źródło json, mimo że nie jest potrzebne.

EDYCJA: Zrozumiałem to przez konsolę programistyczną Google Chrome.

Mam obecnie mój model widoku w pliku JavaScript, który jest również używany przez wszystkie inne strony. Składa się z powiązań dla wszystkich stron.

Moje pytanie brzmi, w jaki sposób mogę załadować dane json na konkretnej stronie lub tylko wtedy, gdy wiązania są obecne - leniwe ładowanie? Chcielibyśmy zachować wszystkie powiązania w jednym pliku JavaScript, nie chcę ich rozdzielać i ładować na stronę.

Odpowiedz

11

Oto artykuł, który napisałem na simliar temacie jakiś czas z powrotem: http://www.knockmeout.net/2011/06/lazy-loading-observable-in-knockoutjs.html

w Twoim przypadku, myślę, że naprawdę chcesz dodać jakieś straże wokół rozmowy $.getJSON aby upewnić się, że jest to tylko co Żądania AJAX, gdy jesteś w odpowiednim stanie (na odpowiedniej karcie).

Wraz z tym, blogu opisuje z flagą deferEvaluation na obliczony obserwowalne w celu zapewnienia, że ​​logika nie działa aż ktoś wiąże przeciwko obliczane obserwowalne (w Twoim przypadku, musisz anonimowy komputerowej obserwowalne, ale można dodaj go do swojego modelu widoku jako właściwość i powiąż z nim w widoku.) Bez tej flagi kod ewaluacyjny będzie działał, gdy utworzysz obliczalne obserwowalne, co nie jest pożądane w twoim przypadku:

+0

Wielkie dzięki :) skończyło się na używaniu wtyczki Knockout JS. Jednak zmieniłem "ko.observable" na "ko.observableArray", aby lepiej służyć mojemu celowi - to powinno być w porządku, prawda? Wydaje się działać zgodnie z oczekiwaniami. – MrSaints

+0

Tak, to nie powinno być problemu. ObservableArray jest naprawdę pod obserwacją z dodatkowymi metodami dodanymi do obsługi operacji tablicowych. –

+0

Jeszcze raz dziękuję. Och i właśnie zauważyłem, że to nie wydaje się być aktualizacją, kiedy klikam na inną kartę. Powinien on ponownie ocenić, kiedy jedna z widocznych zmian jest właściwa? – MrSaints

Powiązane problemy