BackboneJS - Szybki przewodnik

BackboneJS to lightweight JavaScript libraryco pozwala na tworzenie i strukturyzację aplikacji klienckich działających w przeglądarce internetowej. Oferuje strukturę MVC, która wyodrębnia dane w modele, DOM w widoki i wiąże te dwa elementy za pomocą zdarzeń.

History- backbone.js został opracowany przez Jeremy Ashkenas i został wprowadzony na rynek 13 października TH 2010.

Kiedy używać Backbone

  • Rozważ, że tworzysz aplikację z wieloma wierszami kodu przy użyciu JavaScript lub jQuery. W tej aplikacji, jeśli -

    • dodaj lub zamień elementy DOM do aplikacji lub

    • złożyć prośby lub

    • pokaż animację w aplikacji lub

    • dodaj więcej linii do swojego kodu,

    Twoja aplikacja może się skomplikować.

  • Jeśli chcesz mieć lepszy projekt z mniejszą ilością kodu, lepiej jest użyć biblioteki BackboneJS, która zapewnia dobrą funkcjonalność, jest dobrze zorganizowana i zorganizowana w celu tworzenia aplikacji.

  • BackboneJS komunikuje się poprzez zdarzenia; zapewnia to, że nie zepsujesz aplikacji. Twój kod będzie bardziej przejrzysty, ładniejszy i łatwy w utrzymaniu.

funkcje

Poniżej znajduje się lista funkcji BackboneJS -

  • BackboneJS umożliwia znacznie łatwiejsze tworzenie aplikacji i frontendu dzięki wykorzystaniu funkcji JavaScript.

  • BackboneJS zapewnia różne bloki konstrukcyjne, takie jak modele, widoki, zdarzenia, routery i kolekcje do tworzenia aplikacji internetowych po stronie klienta.

  • Gdy model się zmienia, automatycznie aktualizuje kod HTML aplikacji.

  • BackboneJS to prosta biblioteka, która pomaga w oddzieleniu logiki biznesowej i interfejsu użytkownika.

  • Jest to darmowa biblioteka o otwartym kodzie źródłowym i zawiera ponad 100 dostępnych rozszerzeń.

  • Działa jak kręgosłup Twojego projektu i pomaga uporządkować kod.

  • Zarządza modelem danych, który obejmuje dane użytkownika i wyświetla te dane po stronie serwera w tym samym formacie zapisanym po stronie klienta.

  • BackboneJS ma miękką zależność z jQuery i twardą zależność od Underscore.js.

  • Pozwala na tworzenie aplikacji internetowych po stronie klienta lub aplikacji mobilnych w dobrze ustrukturyzowanym i zorganizowanym formacie.

BackboneJS jest bardzo łatwy w konfiguracji i obsłudze. W tym rozdziale omówimy pobieranie i konfiguracjęBackboneJS Library.

BackboneJS może być używany na dwa sposoby -

  • Pobieranie biblioteki UI z oficjalnej strony internetowej.
  • Pobieranie biblioteki interfejsu użytkownika z sieci CDN.

Pobieranie biblioteki UI z oficjalnej strony internetowej

Po otwarciu łącza http://backbonejs.org/, zobaczysz zrzut ekranu, jak pokazano poniżej -

Jak widać, istnieją trzy opcje pobrania tej biblioteki -

  • Development Version - Kliknij ten przycisk prawym przyciskiem myszy i zapisz jako, a otrzymasz pełne źródło JavaScript library.

  • Production Version - Kliknij ten przycisk prawym przyciskiem myszy i zapisz jako, a otrzymasz plik Backbone-min.js library plik spakowany i spakowany gzipem.

  • Edge Version - Kliknij ten przycisk prawym przyciskiem myszy i zapisz jako, a otrzymasz plik unreleased versiontj. rozwój ma miejsce; dlatego musisz go używać na własne ryzyko.

Zależności

BackboneJS zależy od następujących plików JavaScript -

  • Underscore.js- To jedyna twarda zależność, którą należy uwzględnić. Możesz go pobrać stąd .

  • jQuery.js- Dołącz ten plik dla trwałości RESTful, obsługi historii przez Backbone.Router i manipulacji DOM z Backbone.View. Możesz go pobrać stąd .

  • json2.js- Dołącz ten plik do obsługi starszej przeglądarki Internet Explorer. Możesz go pobrać stąd .

Pobierz bibliotekę interfejsu użytkownika z sieci CDN

CDN lub Content Delivery Networkto sieć serwerów zaprojektowanych do udostępniania plików użytkownikom. Jeśli używasz łącza CDN na swojej stronie internetowej, przenosi to odpowiedzialność za hosting plików z własnych serwerów na szereg serwerów zewnętrznych. Daje to również tę zaletę, że jeśli odwiedzający Twoją stronę internetową pobrał już kopię BackboneJS z tej samej sieci CDN, nie będzie trzeba jej ponownie pobierać.

Jak wspomniano powyżej, BackboneJS ma zależność od następującego JavaScript -

  • jQuery
  • Underscore

Stąd CDN dla wszystkich powyższych jest następujący -

<script type = "text/javascript" 
   src = "https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type = "text/javascript"
   src = "https://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script type = "text/javascript"
   src = "https://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>

Note - W tym samouczku używamy wersji biblioteki CDN.

Przykład

Stwórzmy prosty przykład przy użyciu BackboneJS.

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <meta http-equiv = "X-UA-Compatible" content = "IE = edge,chrome = 1">
      <title>Hello World using Backbone.js</title>
   </head>
   
   <body>
      <!-- ========= -->
      <!-- Your HTML -->
      <!-- ========= -->
      <div id = "container">Loading...</div>
      <!-- ========= -->
      <!-- Libraries -->
      <!-- ========= -->
      <script src = "https://code.jquery.com/jquery-2.1.3.min.js"
         type = "text/javascript"></script>
         
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"
         type = "text/javascript"></script>
         
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"
         type = "text/javascript"></script>
      <!-- =============== -->
      <!-- Javascript code -->
      <!-- =============== -->
      
      <script type = "text/javascript">
         var AppView = Backbone.View.extend ({
            // el - stands for element. Every view has an element associated with HTML content, will be rendered. 
            el: '#container',
            
            // It's the first function called when this view is instantiated.
            initialize: function() {
               this.render(); 
            },
            
            // $el - it's a cached jQuery object (el), in which you can use jQuery functions to push content.
            
            //Like the Hello TutorialsPoint in this case.
            render: function() {
               this.$el.html("Hello TutorialsPoint!!!");
            }
         });
         var appView = new AppView();
      </script>
      
   </body>
</html>

Komentarze do kodu są oczywiste. Kilka dodatkowych szczegółów podano poniżej -

Na początku tagu body znajduje się kod HTML

<div id = "container">Loading...</div>

To drukuje Loading...

Następnie dodaliśmy następujące sieci CDN

<script src = "https://code.jquery.com/jquery-2.1.3.min.js"
   type = "text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"
   type = "text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"
   type = "text/javascript"></script>

Następnie mamy następujący skrypt -

var AppView = Backbone.View.extend ({
   
   // el - stands for element. Every view has an element associated with HTML content,
   //will be rendered. 
   el: '#container', 

   // It's the first function called when this view is instantiated. 
   initialize: function() { 
      this.render(); 
   }, 

   // $el - it's a cached jQuery object (el), in which you can use jQuery functions to push content.
   
   //Like the Hello World in this case. 
   render: function() { 
      this.$el.html("<h1>Hello TutorialsPoint!!!</h1>"); 
   } 
});  
var appView = new AppView();

Komentarze są oczywiste. W ostatniej linii rozpoczynamynew AppView(). Spowoduje to wydrukowanie „Hello TutorialsPoint” w plikudiv with id = "container"

Zapisz tę stronę jako myFirstExample.html. Otwórz to w przeglądarce, a na ekranie pojawi się następujący tekst.

BackboneJS nadaje aplikacjom internetowym strukturę, która pozwala oddzielić logikę biznesową od logiki interfejsu użytkownika. W tym rozdziale omówimy styl architektoniczny aplikacji BackboneJS do implementacji interfejsów użytkownika. Poniższy diagram przedstawia architekturę BackboneJS -

Architektura BackboneJS zawiera następujące moduły -

  • Żądanie HTTP
  • Router
  • View
  • Events
  • Model
  • Collection
  • Źródło danych

Omówmy teraz szczegółowo wszystkie moduły.

Żądanie HTTP

Klient HTTP wysyła żądanie HTTP do serwera w postaci komunikatu żądania, w którym przeglądarki internetowe, wyszukiwarki itp. Działają jak klienci HTTP. Użytkownik żąda pliku takiego jak dokumenty, obrazy itp., Korzystając z protokołu żądania HTTP. Na powyższym diagramie można było zobaczyć, że klient HTTP używa routera do wysyłania żądania klienta.

Router

Służy do kierowania aplikacji po stronie klienta i łączy je z akcjami i zdarzeniami za pomocą adresów URL. Jest to reprezentacja adresów URL obiektów aplikacji. Ten adres URL jest zmieniany ręcznie przez użytkownika. Adres URL jest używany przez sieć szkieletową, dzięki czemu może zrozumieć, jaki stan aplikacji ma zostać wysłany lub przedstawiony użytkownikowi.

Router to mechanizm, który może kopiować adresy URL, aby dotrzeć do widoku. Router jest wymagany, gdy aplikacje internetowe udostępniają adresy URL, które można połączyć, zarezerwować i udostępnić dla ważnych lokalizacji w aplikacji.

W powyższej architekturze router wysyła żądanie HTTP do View. Jest to przydatna funkcja, gdy aplikacja wymaga możliwości routingu.

Widok

Widoki BackboneJS są odpowiedzialne za to, jak i co wyświetlać z naszej aplikacji i nie zawierają znaczników HTML dla aplikacji. Określa ideę prezentacji danych modelu użytkownikowi. Widoki służą do odzwierciedlenia „wyglądu modelu danych”.

Klasy widoku nie wiedzą nic o HTML i CSS, a każdy widok może być aktualizowany niezależnie, gdy model się zmienia, bez ponownego ładowania całej strony. Reprezentuje logiczną część interfejsu użytkownika w modelu DOM.

Jak pokazano na powyższej architekturze, Widok reprezentuje interfejs użytkownika, który jest odpowiedzialny za wyświetlanie odpowiedzi na żądanie użytkownika wykonane przez router.

Wydarzenia

Wydarzenia są głównymi częściami każdej aplikacji. Wiąże niestandardowe zdarzenia użytkownika z aplikacją. Można je wmieszać w dowolny obiekt i mogą wiązać i wyzwalać zdarzenia niestandardowe. Możesz powiązać zdarzenia niestandardowe, używając żądanej nazwy.

Zazwyczaj zdarzenia są obsługiwane synchronicznie z ich przepływem programu. W powyższej architekturze można zobaczyć, kiedy wystąpi zdarzenie, reprezentuje dane modelu przy użyciu metody View.

Model

Jest to serce aplikacji JavaScript, która pobiera i zapełnia dane. Modele zawierają dane aplikacji, logikę danych i reprezentują podstawowy obiekt danych we frameworku.

Modele reprezentują jednostki biznesowe z pewną logiką biznesową i weryfikacjami biznesowymi. Są używane głównie do przechowywania danych i logiki biznesowej. Modele można pobierać i zapisywać w pamięci danych. Model pobiera żądanie HTTP ze zdarzeń przekazanych przez widok przy użyciu routera i synchronizuje dane z bazy danych i wysyła odpowiedź z powrotem do klienta.

Kolekcja

Kolekcja to zestaw modeli, które wiążą zdarzenia, gdy model został zmodyfikowany w kolekcji. Kolekcja zawiera listę modeli, które mogą być przetwarzane w pętli i obsługuje sortowanie i filtrowanie. Podczas tworzenia kolekcji możemy zdefiniować, jaki typ modelu będzie miała ta kolekcja wraz z instancją właściwości. Każde zdarzenie wyzwolone w modelu będzie również wyzwalane w kolekcji w modelu.

Pobiera również żądanie z widoku, wiąże zdarzenia i synchronizuje dane z żądanymi danymi oraz wysyła odpowiedź z powrotem do klienta HTTP.

Źródło danych

Jest to połączenie nawiązane z bazą danych z serwera i zawiera informacje wymagane od klienta. Przepływ architektury BackboneJS można opisać w następujący sposób:

  • Użytkownik żąda danych za pomocą routera, który kieruje aplikacje do zdarzeń za pomocą adresów URL.

  • Widok przedstawia dane modelu użytkownikowi.

  • Model i kolekcja pobiera i wypełnia dane z bazy danych przez powiązanie zdarzeń niestandardowych.

W następnym rozdziale zrozumiemy znaczenie zdarzeń w BackboneJS.

Zdarzenia mogą wiązać obiekty i wyzwalać zdarzenia niestandardowe, tj. Można powiązać zdarzenia niestandardowe, używając wybranej przez nas nazwy.

Poniższa tabela zawiera listę wszystkich metod, których można użyć do manipulowania zdarzeniami BackboneJS -

S.No. Metody i opis
1 na

Wiąże zdarzenie z obiektem i wykonuje wywołanie zwrotne za każdym razem, gdy zostanie uruchomione zdarzenie.

2 poza

Usuwa funkcje zwrotne lub wszystkie zdarzenia z obiektu.

3 cyngiel

Wywołuje funkcje zwrotne dla danych zdarzeń.

4 pewnego razu

Rozszerza klasę backbone.Model podczas tworzenia własnego modelu szkieletu.

5 słuchać

Informuje jeden obiekt, aby nasłuchiwał zdarzenia na innym obiekcie.

6 stopListening

Może służyć do zatrzymania nasłuchiwania zdarzeń na innych obiektach.

7 ListenToOnce

Powoduje, że ListenTo występuje tylko raz przed usunięciem funkcji zwrotnej.

Katalog wbudowanych wydarzeń

BackboneJS umożliwia korzystanie z globalnych zdarzeń wszędzie tam, gdzie jest to konieczne w Twojej aplikacji. Zawiera niektóre wbudowane zdarzenia z argumentami, jak pokazano w poniższej tabeli -

S.No. Wydarzenia i opis
1

"add"(model, collection, options)

Jest używany, gdy model jest dodawany do kolekcji.

2

"remove"(model, collection, options)

Usuwa model z kolekcji.

3

"reset"(collection, options)

Służy do resetowania zawartości kolekcji.

4

"sort"(collection, options)

Jest używany, gdy kolekcja wymaga odwołania.

5

"change"(model, options)

Jest używany, gdy mają zostać wprowadzone zmiany w atrybutach modelu.

6

"change:[attribute]"(model, value, options)

Jest używany, gdy występuje aktualizacja atrybutu.

7

"destroy"(model, collection, options)

Odpala, gdy model zostanie zniszczony.

8

"request"(model_or_collection, xhr, options)

Jest używany, gdy model lub kolekcja zaczyna wysyłać żądania do serwera.

9

"sync"(model_or_collection, resp, options)

Jest używany, gdy model lub kolekcja zostaną pomyślnie zsynchronizowane z serwerem.

10

"error"(model_or_collection, resp, options)

Uaktywnia się, gdy wystąpi błąd w żądaniu do serwera.

11

"invalid"(model, error, options)

W przypadku niepowodzenia walidacji modelu zwraca nieprawidłowy.

12

"route:[name]"(params)

W przypadku dopasowania określonej trasy można użyć tego zdarzenia.

13

"route"(route,params)

Jest używany, gdy istnieje dopasowanie do dowolnej trasy.

14

"route"(router, route, params)

Jest używany przez historię, gdy jest dopasowanie do dowolnej trasy.

15

"all"

Odpala dla wszystkich wyzwolonych zdarzeń, podając nazwę zdarzenia jako pierwszy argument.

Modele zawierają dynamiczne dane i ich logikę. Logika, taka jak konwersje, walidacje, obliczone właściwości i kontrola dostępu, należą do kategorii Model. Ponieważ zawiera wszystkie dane aplikacji, model jest również nazywanyheart of JavaScript application.

Poniższa tabela zawiera listę wszystkich metod, których można użyć do manipulowania modelem BackboneJS -

S.No. Metody i opis
1 poszerzać

Rozszerza backbone.Model podczas tworzenia własnego modelu kręgosłupa.

2 zainicjuj

Podczas tworzenia instancji modelu wywoływany jest konstruktor klasy, który jest wywoływany przez zdefiniowanie funkcji inicjalizacji podczas tworzenia modelu.

3 dostać

Pobiera wartość atrybutu w modelu.

4 zestaw

Ustawia wartość atrybutu w modelu.

5 ucieczka

To jest jak get funkcja, ale zwraca wersję atrybutu modelu z ucieczką HTML.

6 ma

Zwraca prawdę, jeśli wartość atrybutu jest zdefiniowana z wartością inną niż null lub niezdefiniowaną.

7 nieoprawny

Usuwa atrybut z modelu szkieletowego.

8 jasny

Usuwa wszystkie atrybuty, w tym atrybut id z modelu szkieletowego.

9 ID

W unikalny sposób identyfikuje encję modelu, którą można ustawić ręcznie podczas tworzenia lub wypełniania modelu lub gdy model jest zapisywany na serwerze.

10 idAttribute

Definiuje unikalny identyfikator modelu, który zawiera nazwę członka klasy, która będzie używana jako id.

11 cid

Jest to automatycznie generowany identyfikator klienta przez Backbone, który jednoznacznie identyfikuje model na kliencie.

12 atrybuty

Atrybuty definiują właściwość modelu.

13 zmieniony

Zmienia wszystkie atrybuty, które uległy zmianie po ustawieniu atrybutów przy użyciu rozszerzenia set() metoda.

14 domyślne

Ustawia wartość domyślną dla modelu, co oznacza, że ​​jeśli użytkownik nie określi żadnych danych, model nie będzie miał pustej właściwości.

15 toJSON

Zwraca kopię atrybutów jako obiekt do stringifikacji JSON.

16 synchronizacja

Służy do komunikacji z serwerem i reprezentowania stanu modelu.

17 sprowadzać

Zaakceptuj dane z serwera przez delegowanie sync() metoda w modelu.

18 zapisać

Zapisuje dane modelu przez delegowanie do sync() metoda, która odczytuje i zapisuje model za każdym razem, gdy wywołuje go Backbone.

19 zniszczyć

Niszczy lub usuwa model z serwera przy użyciu rozszerzenia Backbone.sync metoda, która deleguje żądanie HTTP „delete”.

20 uprawomocnić

Jeśli dane wejściowe są nieprawidłowe, zwraca określony komunikat o błędzie lub jeśli dane wejściowe są prawidłowe, nic nie określa i po prostu wyświetla wynik.

21 validationError

Wyświetla błąd walidacji, jeśli walidacja nie powiedzie się lub po invalid zostanie wywołane zdarzenie.

22 jest ważna

Sprawdza stan modelu przy użyciu validate() metody, a także sprawdza walidacje dla każdego atrybutu.

23 url

Jest używany dla instancji modelu i zwraca adres URL do miejsca, w którym znajduje się zasób modelu.

24 urlRoot

Włącza funkcję url, używając identyfikatora modelu do generowania adresu URL.

25 analizować

Zwraca dane modelu, przechodząc przez obiekt odpowiedzi i reprezentuje dane w formacie JSON.

26 klon

Służy do tworzenia głębokiej kopii modelu lub kopiowania jednego obiektu modelu do innego obiektu.

27 zmienił się

Zwraca wartość true, jeśli atrybut został zmieniony od ostatniego set.

28 jest nowe

Określa, czy model jest nowy, czy istniejący.

29 changeAttributes

Zwraca atrybuty modelu, które zmieniły się od ostatniego set albo staje się fałszywe, jeśli nie ma atrybutów.

30 poprzedni

Określa poprzednią wartość zmienionego atrybutu.

31 previousAttributes

Zwraca stan wszystkich atrybutów sprzed ostatniego zdarzenia zmiany.

Metody podkreślania

Jest sześć Underscore.js metody, które zapewniają ich funkcjonalność do wykorzystania w Backbone.Model.

S.No. Metody i opis
1

_.keys(object)

Służy do uzyskiwania dostępu do wyliczalnych właściwości obiektu.

2

_.values(object)

Służy do pobierania wartości właściwości obiektu.

3

_.pairs(object)

Opisuje właściwości obiektu w postaci par klucz-wartość.

4

_.invert(object)

Zwraca kopię obiektu, w którym klucze stały się wartościami i na odwrót.

5

_.pick(object, *keys)

Zwraca kopię obiektu i wskazuje, które klucze odebrać.

6

_.omit(object, *keys)

Zwraca kopię obiektu i wskazuje, które klucze należy pominąć.

Kolekcje to uporządkowane zestawy modeli. Musimy tylko rozszerzyć klasę kolekcji szkieletu, aby utworzyć własną kolekcję. Każde zdarzenie wyzwalane w modelu w kolekcji będzie również wyzwalane bezpośrednio w kolekcji. Umożliwia to nasłuchiwanie zmian określonych atrybutów w dowolnym modelu w kolekcji.

Poniższa tabela zawiera listę wszystkich metod, których można użyć do manipulowania kolekcją BackboneJS -

S.No. Metody i opis
1 poszerzać

Rozszerza klasę kolekcji szkieletu, aby utworzyć kolekcję.

2 Model

Aby określić klasę modelu, musimy przesłonić właściwość modelu klasy kolekcji.

3 zainicjuj

Po utworzeniu instancji modelu jest ona wywoływana przez zdefiniowanie funkcji inicjalizacji podczas tworzenia kolekcji.

4 modele

Tablica modeli, które są tworzone w kolekcji.

5 toJSON

Zwraca kopię atrybutów modelu przy użyciu formatu JSON w kolekcji.

6 synchronizacja

Reprezentuje stan modelu i używa Backbone.sync do wyświetlania stanu kolekcji.

7 Dodaj

Dodaj model lub tablicę modeli do kolekcji.

8 usunąć

Usuwa model lub tablicę modeli z kolekcji.

9 Resetowanie

Resetuje kolekcję i zapełnia nową tablicą modeli lub opróżnia całą kolekcję.

10 zestaw

Służy do aktualizacji kolekcji o zestaw elementów w modelu. Jeśli zostanie znaleziony nowy model, pozycje zostaną dodane do tego modelu.

11 dostać

Służy do pobierania modelu z kolekcji przy użyciu idor cid.

12 w

Pobierz model z kolekcji przy użyciu określonego indeksu.

13 Pchać

Jest podobna do metody add (), która pobiera tablicę modeli i wypycha je do kolekcji.

14 Muzyka pop

Jest podobna do metody remove (), która pobiera tablicę modeli i usuwa modele z kolekcji.

15 niezmieniony

Dodaj określony model na początku kolekcji.

16 Zmiana

Usuwa pierwszy element z kolekcji.

17 plasterek

Wyświetla płytką kopię elementów z modelu kolekcji.

18 długość

Zlicza liczbę modeli w kolekcji.

19 komparator

Służy do sortowania elementów w kolekcji.

20 sortować

Sortuje elementy w kolekcji i używa właściwości komparatora w celu sortowania elementów.

21 podroby

Pobiera atrybuty z modelu w kolekcji.

22 gdzie

Służy do wyświetlania modelu przy użyciu dopasowanego atrybutu w kolekcji.

23 findWhere

Zwraca model, który pasuje do określonego atrybutu w kolekcji.

24 url

Tworzy instancję kolekcji i zwraca, gdzie znajdują się zasoby.

25 analizować

Zwraca dane kolekcji, przechodząc przez obiekt odpowiedzi i reprezentuje dane w formacie JSON.

26 klon

Zwraca płytką kopię określonego obiektu.

27 sprowadzać

Wyodrębnia dane z modelu w kolekcji przy użyciu metody synchronizacji.

28 Stwórz

Tworzy nową instancję modelu w kolekcji.

Metody podkreślania

Poniższa tabela zawiera listę plików Underscore.js metody, które zapewniają ich funkcjonalność do użycia w Backbone.Collection.

S.No. Metody i opis
1

_.each(list, iteratee, [context])

Iteruje każdy z elementów kolekcji przy użyciu funkcji iteratee.

2

_.map(list, iteratee, [context])

Mapuje każdą wartość i wyświetla je w nowej tablicy wartości przy użyciu rozszerzenia iteratee funkcjonować.

3

_.reduce(list, iteratee, memo, [context])

Redukuje listę wartości do jednej wartości, znanej również jako inject i foldl.

4

_.reduceRight(list, iteratee, memo, [context])

Jest to właściwa wersja asocjacyjna reduce.

5

_.find(list, predicate, [context])

Znajduje każdą wartość i zwraca pierwszą, która przejdzie przez predykat lub test.

6

_.filter(list, predicate, [context])

Filtruje każdą wartość i zwraca tablicę wartości, które przekazują predykat lub test.

7

_.reject(list, predicate, [context])

Zwraca odrzucone elementy na liście, które nie przekazują przewidywanych wartości.

8

_.every(list, predicate, [context])

Zwraca prawdę, jeśli elementy na liście przekazują przewidywane wartości.

9

_.some(list, predicate, [context])

Zwraca prawdę, jeśli elementy na liście przekazują przewidywane wartości.

10

_.contains(list, value, [fromIndex])

Zwraca prawdę, jeśli wartość jest obecna na liście.

11

_.invoke(list, methodName, *arguments)

Wywołuje nazwę metody za pomocą methodName() na każdej wartości na liście.

12

_.max(list, [iteratee], [context])

Określa maksymalną wartość na liście.

13

_.min(list, [iteratee], [context])

Określa minimalną wartość na liście.

14

_.sortBy(list, [iteratee], [context])

Zwraca posortowane elementy w kolejności rosnącej, używając iteratee na liście.

15

_.groupBy(list, [iteratee], [context])

Dzieli wartości kolekcji na zestawy, pogrupowane przy użyciu iteratee na liście.

16

_.shuffle(list)

Zwraca potasowaną kopię listy.

17

_.toArray(list)

Definiuje tablicę listy.

18

_.size(list)

Określa liczbę wartości na liście.

19

_.first(array, [n])

Określa pierwszy element tablicy na liście.

20

_.initial(array, [n])

Zwraca wszystko, ale określa ostatni wpis tablicy na liście.

21

_.last(array, [n])

Określa ostatni element tablicy na liście.

22

_.rest(array, [index])

Definiuje pozostałe elementy tablicy.

23

_.without(array, *values)

Zwraca wartości wszystkich instancji, które zostały usunięte z listy.

24

_.indexOf(array, value, [isSorted])

Zwraca wartość, jeśli zostanie znaleziona pod określonym indeksem lub zwraca -1, jeśli nie zostanie znaleziona.

25

_.indexOf(array, value, [fromIndex])

Zwraca ostatnie wystąpienie wartości w tablicy lub zwraca -1, jeśli nie zostanie znaleziona.

26

_.isEmpty(object)

Zwraca prawdę, jeśli nie ma żadnych wartości na liście.

27

_.chain(obj)

Zwraca opakowany obiekt.

Router jest używany do kierowania aplikacji po stronie klienta i definiuje reprezentację adresu URL obiektu aplikacji. Router jest wymagany, gdy aplikacje internetowe udostępniają adresy URL, które można połączyć, zarezerwować i udostępnić dla ważnych lokalizacji w aplikacji.

W poniższej tabeli wymieniono metody, których można użyć do manipulowania plikiem BackboneJS - Router -

S.No. Metody i opis
1 poszerzać

Rozszerza klasę routerów w sieci szkieletowej.

2 trasy

Definiuje reprezentację adresów URL obiektów aplikacji.

3 zainicjuj

Tworzy nowy konstruktor dla instancji routera.

4 trasa

Tworzy trasę dla routera.

5 nawigować

Służy do aktualizacji adresu URL w aplikacjach.

6 wykonać

Jest używany, gdy trasa pasuje do jej odpowiedniego wywołania zwrotnego.

Śledzi historię, dopasowuje odpowiednią trasę, uruchamia wywołania zwrotne w celu obsługi zdarzeń i umożliwia routing w aplikacji.

początek

To jedyna metoda, której można użyć do manipulowania plikiem BackboneJS-History. Rozpoczyna nasłuchiwanie tras i zarządza historią adresów URL do zaksięgowania.

Składnia

Backbone.history.start(options)

Parametry

options - Opcje obejmują parametry, takie jak pushState i hashChange używany z historią.

Przykład

<!DOCTYPE html>
<html>
   <head>
      <title>History Example</title>
      <script src = "https://code.jquery.com/jquery-2.1.3.min.js"
         type = "text/javascript"></script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
         type = "text/javascript"></script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
         type = "text/javascript"></script>
   </head>
   
   <script type = "text/javascript">
      //'Router' is a name of the router class
      var Router = Backbone.Router.extend ({

         //The 'routes' maps URLs with parameters to functions on your router
         routes: {
            "myroute" : "myFunc"
         },

         //'The function 'myFunc' defines the links for the route on the browser
         myFunc: function (myroute) {
            document.write(myroute);
         }
      });

      //'router' is an instance of the Router
      var router = new Router();

      //Start listening to the routes and manages the history for bookmarkable URL's
      Backbone.history.start();
   </script>
   
   <body>
      
      <a href = "#route1">Route1 </a>
      <a href = "#route2">Route2 </a>
      <a href = "#route3">Route3 </a>
   </body>
   
</html>

Wynik

Wykonajmy następujące kroki, aby zobaczyć, jak działa powyższy kod -

  • Zapisz powyższy kod w pliku start.htm plik.

  • Otwórz ten plik HTML w przeglądarce.

NOTE- Powyższa funkcjonalność jest związana z paskiem adresu. Tak więc, kiedy otworzysz powyższy kod w przeglądarce, wyświetli wynik w następujący sposób.

Kliknij tutaj, aby zobaczyć demo

Służy do utrwalania stanu modelu na serwerze.

W poniższej tabeli wymieniono metody, których można użyć do manipulowania plikiem BackboneJS-Sync -

S.No. Metody i opis
1 Backbone.sync

Utrzymuje stan modelu na serwerze.

2

Backbone.ajax

Definiuje niestandardową funkcję Ajax.

3 Backbone.emulateHTTP

Jeśli twój serwer WWW nie obsługuje podejścia REST lub HTTP, włącz Backbone.emulateHTTP.

4 Backbone.emulateJSON

Służy do obsługi żądań zakodowanych przy użyciu application/json ustawiając metodę na true.

Widoki służą do odzwierciedlenia „wyglądu modelu danych”. Reprezentują dane modelu dla użytkownika. Dają ideę prezentacji danych modelu użytkownikowi. Obsługuje zdarzenia wejściowe użytkownika, wiąże zdarzenia i metody, renderuje model lub kolekcję i współdziała z użytkownikiem.

W poniższej tabeli wymieniono metody, których można użyć do manipulowania plikiem BackboneJS-Views.

S.No. Metody i opis
1 poszerzać

Rozszerza Backbone.View class, aby utworzyć niestandardową klasę widoku.

2 zainicjuj

Tworzy instancję widoku przy użyciu słowa kluczowego new.

3 el

Definiuje, który element ma być używany jako odniesienie widoku.

4 $ el

Reprezentuje obiekt jQuery dla elementu widoku.

5 setElement

Określa istniejący element DOM do innego elementu DOM.

6 atrybuty

Mogą być używane jako atrybuty elementu DOM w klasie widoku.

7 $ (jQuery)

Jest używany jako selektor zawierający funkcję $ i uruchamia zapytania w elemencie widoku.

8 szablon

Podczas renderowania widoku szablon tworzy kopie znaczników wielokrotnego użytku i zapewnia dostęp do danych instancji.

9 renderowanie

Zawiera logikę renderowania szablonu.

10 usunąć

Usuwa widok z DOM.

11 delegateEvents

Wiąże elementy z określonymi elementami DOM za pomocą metod wywołania zwrotnego do obsługi zdarzeń.

12 undelegateEvents

Usuwa z widoku zdarzenia delegatów.

Klasa narzędziowa definiuje zestaw metod używanych do implementacji narzędzia szkieletowego.

W poniższej tabeli wymieniono metody, których można użyć do manipulowania plikiem BackboneJS-Utility -

S.No. Metody i opis
1 Backbone.noConflict

Wyświetla oryginalną wartość obiektu Backbone i umożliwia przechowywanie odniesienia do szkieletu.

2 Sieć szkieletowa. $

Pozwala Backbone na użycie określonego obiektu jako biblioteki DOM.