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.