BackboneJS - Guia rápido

BackboneJS é um lightweight JavaScript libraryque permite desenvolver e estruturar as aplicações do lado do cliente que rodam em um navegador da web. Ele oferece uma estrutura MVC que abstrai dados em modelos, DOM em visualizações e vincula esses dois usando eventos.

History- backbone.js foi desenvolvido por Jeremy Ashkenas e foi inicialmente lançado em 13 de outubro th de 2010.

Quando usar o Backbone

  • Considere que você está criando um aplicativo com várias linhas de código usando JavaScript ou jQuery. Neste aplicativo, se você -

    • adicionar ou substituir elementos DOM no aplicativo ou

    • fazer alguns pedidos ou

    • mostrar animação no aplicativo ou

    • adicione mais linhas ao seu código,

    então seu aplicativo pode se tornar complicado.

  • Se você quer um design melhor com menos código, então é melhor usar a biblioteca BackboneJS que oferece boa funcionalidade, é bem organizada e de forma estruturada para desenvolver sua aplicação.

  • O BackboneJS se comunica por meio de eventos; isso garante que você não bagunce o aplicativo. Seu código ficará mais limpo, agradável e fácil de manter.

Características

A seguir está uma lista de recursos do BackboneJS -

  • O BackboneJS permite o desenvolvimento de aplicativos e front-end de uma forma muito mais fácil usando funções JavaScript.

  • O BackboneJS fornece vários blocos de construção, como modelos, visualizações, eventos, roteadores e coleções para montar os aplicativos da Web do lado do cliente.

  • Quando um modelo muda, ele atualiza automaticamente o HTML do seu aplicativo.

  • BackboneJS é uma biblioteca simples que ajuda a separar a lógica de negócios e de interface do usuário.

  • É uma biblioteca gratuita e de código aberto e contém mais de 100 extensões disponíveis.

  • Ele atua como um backbone para seu projeto e ajuda a organizar seu código.

  • Ele gerencia o modelo de dados que inclui os dados do usuário e exibe esses dados no lado do servidor com o mesmo formato escrito no lado do cliente.

  • BackboneJS tem uma dependência suave com jQuery e uma forte dependência com Underscore.js.

  • Ele permite criar aplicativos da web do lado do cliente ou aplicativos móveis em um formato bem estruturado e organizado.

O BackboneJS é muito fácil de configurar e trabalhar. Este capítulo irá discutir o download e a configuração doBackboneJS Library.

O BackboneJS pode ser usado das duas maneiras a seguir -

  • Baixando a biblioteca de UI de seu site oficial.
  • Baixando a biblioteca da IU dos CDNs.

Baixando a biblioteca de UI de seu site oficial

Quando você abre o link http://backbonejs.org/, você verá uma captura de tela conforme mostrado abaixo -

Como você pode ver, existem três opções de download desta biblioteca -

  • Development Version - Clique com o botão direito neste botão e salve como para obter o código-fonte completo JavaScript library.

  • Production Version - Clique com o botão direito neste botão e salve como e você obterá o Backbone-min.js library arquivo que é compactado e compactado.

  • Edge Version - Clique com o botão direito neste botão e salve como e você obterá um unreleased version, ou seja, o desenvolvimento está em andamento; portanto, você precisa usá-lo por sua própria conta e risco.

Dependências

O BackboneJS depende dos seguintes arquivos JavaScript -

  • Underscore.js- Esta é a única dependência rígida que precisa ser incluída. Você pode obtê-lo aqui .

  • jQuery.js- Incluir este arquivo para persistência RESTful, suporte de histórico via Backbone.Router e manipulação de DOM com Backbone.View. Você pode obtê-lo aqui .

  • json2.js- Inclua este arquivo para suporte mais antigo do Internet Explorer. Você pode obtê-lo aqui .

Baixe a Biblioteca da IU dos CDNs

Um CDN ou Content Delivery Networké uma rede de servidores projetada para servir arquivos aos usuários. Se você usar um link CDN em sua página da web, ele transfere a responsabilidade de hospedar arquivos de seus próprios servidores para uma série de servidores externos. Isso também oferece a vantagem de que, se o visitante de sua página da web já tiver baixado uma cópia do BackboneJS do mesmo CDN, não será necessário baixá-la novamente.

Como dito acima, o BackboneJS depende do seguinte JavaScript -

  • jQuery
  • Underscore

Portanto, o CDN para todos os itens acima é o seguinte -

<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 - Estamos usando as versões CDN da biblioteca em todo este tutorial.

Exemplo

Vamos criar um exemplo simples usando 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>

Os comentários do código são autoexplicativos. Mais alguns detalhes são fornecidos abaixo -

Há um código html no início da tag body

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

Isto imprime Loading...

Em seguida, adicionamos os seguintes CDNs

<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>

Em seguida, temos o seguinte script -

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();

Os comentários são autoexplicativos. Na última linha, estamos inicializandonew AppView(). Isso imprimirá o "Hello TutorialsPoint" nodiv with id = "container"

Salve esta página como myFirstExample.html. Abra em seu navegador e a tela mostrará o seguinte texto.

O BackboneJS fornece uma estrutura para as aplicações web que permite separar a lógica de negócios e a lógica da interface do usuário. Neste capítulo, vamos discutir o estilo de arquitetura do aplicativo BackboneJS para implementar interfaces de usuário. O diagrama a seguir mostra a arquitetura do BackboneJS -

A arquitetura do BackboneJS contém os seguintes módulos -

  • Pedido HTTP
  • Router
  • View
  • Events
  • Model
  • Collection
  • Fonte de dados

Vamos agora discutir todos os módulos em detalhes.

Pedido HTTP

O cliente HTTP envia uma solicitação HTTP a um servidor na forma de uma mensagem de solicitação em que navegadores da web, mecanismos de pesquisa etc. atuam como clientes HTTP. O usuário solicita um arquivo, como documentos, imagens, etc., usando o protocolo de solicitação HTTP. No diagrama acima, você pode ver que o cliente HTTP usa o roteador para enviar a solicitação do cliente.

Roteador

Ele é usado para rotear os aplicativos do lado do cliente e os conecta a ações e eventos usando URLs. É uma representação de URL dos objetos do aplicativo. Este URL é alterado manualmente pelo usuário. O URL é usado pelo backbone para que ele possa entender qual estado do aplicativo deve ser enviado ou apresentado ao usuário.

O roteador é um mecanismo que pode copiar a URL para chegar à visualização. O Roteador é necessário quando os aplicativos da web fornecem URLs vinculáveis, marcáveis ​​e compartilháveis ​​para locais importantes no aplicativo.

Na arquitetura acima, o roteador está enviando uma solicitação HTTP para o View. É um recurso útil quando um aplicativo precisa de capacidade de roteamento.

Visão

As visualizações do BackboneJS são responsáveis ​​por como e o que exibir de nosso aplicativo e não contêm marcação HTML para o aplicativo. Ele especifica uma ideia por trás da apresentação dos dados do modelo ao usuário. As visualizações são usadas para refletir "a aparência do seu modelo de dados".

As classes de visão não sabem nada sobre HTML e CSS e cada visão pode ser atualizada independentemente quando o modelo muda sem recarregar a página inteira. Ele representa a parte lógica da IU no DOM.

Conforme mostrado na arquitetura acima, o View representa a interface do usuário que é responsável por exibir a resposta para a solicitação do usuário feita usando o Roteador.

Eventos

Os eventos são as partes principais de qualquer aplicativo. Ele liga os eventos personalizados do usuário a um aplicativo. Eles podem ser misturados em qualquer objeto e são capazes de vincular e disparar eventos personalizados. Você pode ligar os eventos personalizados usando o nome desejado de sua escolha.

Normalmente, os eventos são tratados em sincronia com o fluxo do programa. Na arquitetura acima, você pode ver quando um evento ocorre, ele representa os dados do modelo usando a Visualização.

Modelo

É o coração do aplicativo JavaScript que recupera e preenche os dados. Os modelos contêm dados de uma aplicação, lógica dos dados e representam o objeto de dados básico no framework.

Modelos representa entidades de negócios com alguma lógica de negócios e validações de negócios. Eles são usados ​​principalmente para armazenamento de dados e lógica de negócios. Os modelos podem ser recuperados e salvos no armazenamento de dados. Um modelo pega a solicitação HTTP dos eventos passados ​​pela visualização usando o roteador e sincroniza os dados do banco de dados e envia a resposta de volta ao cliente.

Coleção

Uma coleção é um conjunto de modelos que associa eventos, quando o modelo foi modificado na coleção. A coleção contém uma lista de modelos que podem ser processados ​​no loop e oferece suporte para classificação e filtragem. Ao criar uma coleção, podemos definir que tipo de modelo essa coleção terá junto com a instância de propriedades. Qualquer evento disparado em um modelo também será disparado na coleção do modelo.

Ele também recebe a solicitação da visualização, vincula eventos e sincroniza os dados com os dados solicitados e envia a resposta de volta ao cliente HTTP.

Fonte de dados

É a conexão configurada a um banco de dados de um servidor e contém as informações solicitadas ao cliente. O fluxo da arquitetura BackboneJS pode ser descrito conforme mostrado nas seguintes etapas -

  • Um usuário solicita os dados usando o roteador, que roteia os aplicativos para os eventos usando os URLs.

  • A visualização representa os dados do modelo para o usuário.

  • O modelo e a coleção recuperam e preenchem os dados do banco de dados ligando eventos customizados.

No próximo capítulo, entenderemos a importância dos eventos no BackboneJS.

Os eventos são capazes de vincular objetos e disparar eventos personalizados, ou seja, você pode vincular os eventos personalizados usando o nome desejado de nossa escolha.

A tabela a seguir lista todos os métodos que você pode usar para manipular os eventos BackboneJS -

S.No. Métodos e Descrição
1 em

Ele associa um evento a um objeto e executa o retorno de chamada sempre que um evento é disparado.
2 fora

Ele remove funções de retorno de chamada ou todos os eventos de um objeto.
3 desencadear

Ele invoca as funções de retorno de chamada para os eventos fornecidos.
4 uma vez

Ele estende a classe backbone.Model ao criar seu próprio modelo de backbone.
5 ouvir

Informa um objeto para ouvir um evento em outro objeto.
6 stopListening

Ele pode ser usado para parar de ouvir eventos em outros objetos.
7 listenToOnce

Isso faz com que listenTo ocorra apenas uma vez antes de a função de retorno de chamada ser removida.

Catálogo de eventos integrados

O BackboneJS permite o uso de eventos globais sempre que necessário em sua aplicação. Ele contém alguns dos eventos integrados com argumentos conforme mostrado na tabela a seguir -

S.No. Eventos e Descrição
1

"add"(model, collection, options)

É usado quando um modelo é adicionado à coleção.
2

"remove"(model, collection, options)

Ele remove um modelo da coleção.
3

"reset"(collection, options)

É usado para redefinir o conteúdo da coleção.
4

"sort"(collection, options)

É usado quando uma coleção precisa ser reaproveitada.
5

"change"(model, options)

É usado quando alterações devem ser feitas nos atributos de um modelo.
6

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

É usado quando há uma atualização em um atributo.
7

"destroy"(model, collection, options)

Ele dispara quando o modelo é destruído.
8

"request"(model_or_collection, xhr, options)

É usado quando um modelo ou uma coleção começa a solicitar ao servidor.
9

"sync"(model_or_collection, resp, options)

É usado quando um modelo ou coleção é sincronizado com sucesso com o servidor.
10

"error"(model_or_collection, resp, options)

É ativado quando ocorre um erro na solicitação ao servidor.
11

"invalid"(model, error, options)

Quando há uma falha na validação do modelo, ele retorna inválido.
12

"route:[name]"(params)

Quando há uma correspondência de rota específica, este evento pode ser usado.
13

"route"(route,params)

É usado quando há correspondência com qualquer rota.
14

"route"(router, route, params)

É usado pela história quando há correspondência com qualquer rota.
15

"all"

Ele é acionado para todos os eventos disparados passando o nome do evento como o primeiro argumento.

Os modelos contêm dados dinâmicos e sua lógica. Lógicas como conversões, validações, propriedades computadas e controle de acesso se enquadram na categoria Modelo. Como contém todos os dados do aplicativo, um modelo também é chamado deheart of JavaScript application.

A tabela a seguir lista todos os métodos que você pode usar para manipular o BackboneJS-Model -

S.No. Métodos e Descrição
1 ampliar

Isso estende o backbone.Model classe enquanto cria seu próprio modelo de backbone.
2 inicializar

Quando uma instância de modelo é criada, o construtor da classe é chamado e é invocado definindo a função de inicialização quando o modelo é criado.
3 pegue

Ele obtém o valor de um atributo no modelo.
4 conjunto

Ele define o valor de um atributo no modelo.
5 escapar

É como o get função, mas retorna a versão com escape de HTML do atributo de um modelo.
6 tem

Retorna verdadeiro, se o valor do atributo for definido com valor não nulo ou valor não indefinido.
7 não definido

Ele remove um atributo de um modelo de backbone.
8 Claro

Remove todos os atributos, incluindo o atributo id de um modelo de backbone.
9 Eu iria

Ele identifica exclusivamente a entidade do modelo, que pode ser definida manualmente quando um modelo é criado ou preenchido ou quando um modelo é salvo no servidor.
10 idAttribute

Define o identificador único do modelo que contém o nome do membro da classe que será usado como id.
11 cid

É um ID de cliente gerado automaticamente pelo Backbone que identifica exclusivamente o modelo no cliente.
12 atributos

Atributos define a propriedade de um modelo.
13 mudou

Altera todos os atributos que mudaram após definir os atributos usando o set() método.
14 padrões

Define um valor padrão para um modelo, o que significa que se o usuário não especificar nenhum dado, o modelo não cairá com uma propriedade vazia.
15 toJSON

Retorna uma cópia dos atributos como um objeto para a stringificação JSON.
16 sincronizar

É usado para se comunicar com o servidor e representar o estado de um modelo.
17 buscar

Aceite os dados do servidor delegando sync() método no modelo.
18 Salve 

Salva os dados do modelo delegando a sync() método que lê e salva o modelo toda vez que um Backbone o chama.
19 destruir

Destrói ou remove o modelo do servidor usando o Backbone.sync método que delega a solicitação de "exclusão" HTTP.
20 validar

Se a entrada for inválida, ele retornará uma mensagem de erro especificada ou se a entrada for válida, ele não especifica nada e simplesmente exibe o resultado.
21 erro de validação

Ele exibe o erro de validação, se a validação falhar ou após o invalid evento é acionado.
22 é válido

Ele verifica o estado do modelo usando o validate() método e também verifica as validações para cada atributo.
23 url

É usado para a instância do modelo e retorna a url para onde o recurso do modelo está localizado.
24 urlRoot

Habilita a função url usando a id do modelo para gerar a URL.
25 analisar

Retorna os dados do modelo passando pelo objeto de resposta e representa os dados no formato JSON.
26 clone

É usado para criar uma cópia profunda de um modelo ou para copiar um objeto de modelo para outro objeto.
27 mudou

Retorna verdadeiro, se o atributo for alterado desde o último set.
28 é novo

Determina se o modelo é novo ou existente.
29 changesAttributes

Ele retorna os atributos do modelo que mudaram desde o último set ou então se torna falso, se não houver atributos.
30 anterior

Ele determina o valor anterior do atributo alterado.
31 anteriorAtributos

Retorna o estado de todos os atributos antes do último evento de mudança.

Métodos de sublinhado

Tem seis Underscore.js métodos que fornecem sua funcionalidade para serem usados ​​no Backbone.Model.

S.No. Métodos e Descrição
1

_.keys(object)

É usado para acessar as propriedades enumeráveis ​​do objeto.
2

_.values(object)

É usado para obter valores das propriedades do objeto.
3

_.pairs(object)

Ele descreve as propriedades do objeto em termos de pares de valores-chave.
4

_.invert(object)

Ele retorna a cópia do objeto, em que as chaves se tornaram os valores e vice-versa.
5

_.pick(object, *keys)

Ele retorna a cópia do objeto e indica quais chaves pegar.
6

_.omit(object, *keys)

Ele retorna a cópia do objeto e indica quais chaves omitir.

Coleções são conjuntos ordenados de modelos. Precisamos apenas estender a classe de coleção do backbone para criar nossa própria coleção. Qualquer evento acionado em um modelo em uma coleção também será acionado diretamente na coleção. Isso permite que você escute as alterações em atributos específicos em qualquer modelo em uma coleção.

A tabela a seguir lista todos os métodos que você pode usar para manipular a coleção BackboneJS -

S.No. Métodos e Descrição
1 ampliar

Estende a classe de coleção do backbone para criar uma coleção.
2 modelo

Para especificar a classe do modelo, precisamos substituir a propriedade do modelo da classe de coleção.
3 inicializar

Quando uma instância de modelo é criada, ela é chamada definindo a função de inicialização quando a coleção é criada.
4 modelos

Matriz de modelos que são criados dentro da coleção.
5 toJSON

Retorna a cópia dos atributos de um modelo usando o formato JSON na coleção.
6 sincronizar

Ele representa o estado do modelo e usa o Backbone.sync para exibir o estado da coleção.
7 adicionar

Adicione um modelo ou matriz de modelos à coleção.
8 remover

Remove um modelo ou matriz de modelos da coleção.
9 Redefinir

Ele redefine a coleção e preenche com uma nova matriz de modelos ou irá esvaziar a coleção inteira.
10 conjunto

É usado para atualizar a coleção com um conjunto de itens em um modelo. Se algum novo modelo for encontrado, os itens serão adicionados a esse modelo.
11 pegue

É usado para recuperar o modelo de uma coleção usando o idor cid.
12 em

Recupere o modelo de uma coleção usando o índice especificado.
13 empurrar

É semelhante ao método add (), que pega a matriz de modelos e envia os modelos para a coleção.
14 pop

É semelhante ao método remove () que pega o array de modelos e remove os modelos da coleção.
15 não mudar

Adicione um modelo especificado no início de uma coleção.
16 mudança

Ele remove o primeiro item da coleção.
17 fatia

Exibe a cópia superficial dos elementos do modelo de coleção.
18 comprimento

Conta o número de modelos na coleção.
19 comparador

É usado para classificar os itens da coleção.
20 ordenar

Classifica os itens na coleção e usa a propriedade do comparador para classificar os itens.
21 arranca

Recupera os atributos do modelo na coleção.
22 Onde

Ele é usado para exibir o modelo usando o atributo correspondente na coleção.
23 findWhere

Ele retorna o modelo que corresponde ao atributo especificado na coleção.
24 url

Ele cria uma instância da coleção e retorna onde os recursos estão localizados.
25 analisar

Retorna os dados da coleção passando pelo objeto de resposta e representa os dados no formato JSON.
26 clone

Ele retorna a cópia superficial do objeto especificado.
27 buscar

Ele extrai os dados do modelo na coleção usando o método de sincronização.
28 crio

Ele cria uma nova instância do modelo na coleção.

Métodos de sublinhado

A tabela a seguir lista os Underscore.js métodos que fornecem sua funcionalidade para serem usados ​​no Backbone.Collection.

S.No. Métodos e Descrição
1

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

Itera cada um dos elementos da coleção usando a função iteratee.
2

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

Ele mapeia cada valor e os exibe em uma nova matriz de valores usando o iteratee função.
3

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

Ele reduz a lista de valores em um único valor e também conhecido como inject e foldl.
4

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

É a versão associativa certa de reduce.
5

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

Ele encontra cada valor e retorna o primeiro que passa no predicado ou teste.
6

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

Ele filtra cada valor e retorna a matriz de valores que passa no predicado ou teste.
7

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

Ele retorna os elementos rejeitados na lista que não passam os valores previstos.
8

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

Ele retorna verdadeiro, se os elementos da lista passam os valores previstos.
9

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

Ele retorna verdadeiro, se os elementos da lista passam os valores previstos.
10

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

Ele retorna verdadeiro, se um valor estiver presente na lista.
11

_.invoke(list, methodName, *arguments)

Ele invoca o nome do método usando methodName() em cada valor da lista.
12

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

Ele especifica o valor máximo da lista.
13

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

Ele especifica o valor mínimo na lista.
14

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

Ele retorna os elementos classificados em ordem crescente usando iteratee na lista.
15

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

Ele divide os valores da coleção em conjuntos, agrupados usando o iteratee na lista.
16

_.shuffle(list)

Ele retorna a cópia embaralhada da lista.
17

_.toArray(list)

Ele define uma matriz da lista.
18

_.size(list)

Ele define o número de valores na lista.
19

_.first(array, [n])

Ele especifica o primeiro elemento da matriz na lista.
20

_.initial(array, [n])

Ele retorna tudo, mas especifica a última entrada da matriz na lista.
21

_.last(array, [n])

Ele especifica o último elemento da matriz na lista.
22

_.rest(array, [index])

Ele define os elementos restantes na matriz.
23

_.without(array, *values)

Ele retorna os valores de todas as instâncias que são removidas da lista.
24

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

Ele retorna o valor se for encontrado em um índice especificado ou retorna -1, se não for encontrado.
25

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

Retorna a última ocorrência do valor na matriz ou retorna -1, se não for encontrado.
26

_.isEmpty(object)

Retorna verdadeiro se não houver valores na lista.
27

_.chain(obj)

Ele retorna um objeto empacotado.

O roteador é usado para rotear os aplicativos do lado do cliente e define a representação de URL do objeto do aplicativo. Um roteador é necessário quando os aplicativos da web fornecem URLs vinculáveis, marcáveis ​​e compartilháveis ​​para locais importantes no aplicativo.

A tabela a seguir lista os métodos que podem ser usados ​​para manipular o BackboneJS - Router -

S.No. Métodos e Descrição
1 ampliar

Ele estende a classe de roteador do backbone.
2 rotas

Ele define a representação de URL de objetos de aplicativos.
3 inicializar

Ele cria um novo construtor para a instanciação do roteador.
4 rota

Ele cria uma rota para o roteador.
5 navegar

Ele é usado para atualizar a URL nos aplicativos.
6 executar

É usado quando uma rota corresponde ao seu retorno de chamada correspondente.

Ele mantém um registro do histórico, combina a rota apropriada, dispara callbacks para lidar com eventos e permite o roteamento no aplicativo.

começar

Este é o único método que pode ser usado para manipular o BackboneJS-History. Ele começa a escutar as rotas e gerencia o histórico de URLs marcáveis.

Sintaxe

Backbone.history.start(options)

Parâmetros

options - As opções incluem parâmetros como pushState e hashChange usado com história.

Exemplo

<!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>

Resultado

Vamos realizar as seguintes etapas para ver como funciona o código acima -

  • Salve o código acima no start.htm Arquivo.

  • Abra este arquivo HTML em um navegador.

NOTE- A funcionalidade acima está relacionada à barra de endereço. Portanto, ao abrir o código acima no navegador, ele mostrará o resultado da seguinte maneira.

É usado para manter o estado do modelo no servidor.

A tabela a seguir lista os métodos que podem ser usados ​​para manipular o BackboneJS-Sync -

S.No. Métodos e Descrição
1 Backbone.sync

Persiste o estado do modelo para o servidor.
2

Backbone.ajax

Ele define a função ajax personalizada.
3 Backbone.emulateHTTP

Se o seu servidor da web não suportar REST ou abordagem HTTP, ligue o Backbone.emulateHTTP.
4 Backbone.emulateJSON

É usado para lidar com as solicitações codificadas com application/json definindo o método para true.

As visualizações são usadas para refletir "a aparência do seu modelo de dados". Eles representam os dados do modelo para o usuário. Eles fornecem a ideia por trás da apresentação dos dados do modelo ao usuário. Ele lida com os eventos de entrada do usuário, associa eventos e métodos, renderiza o modelo ou coleção e interage com o usuário.

A tabela a seguir lista os métodos que podem ser usados ​​para manipular o BackboneJS-Views.

S.No. Métodos e Descrição
1 ampliar

Isso estende o Backbone.View classe para criar uma classe de visualização personalizada.
2 inicializar

Ele instancia a visualização usando a nova palavra-chave.
3 el

Ele define qual elemento deve ser usado como referência de visualização.
4 $ el

Ele representa o objeto jQuery para o elemento da visualização.
5 setElement

Ele especifica o elemento DOM existente para um elemento DOM diferente.
6 atributos

Eles podem ser usados ​​como atributos de elemento DOM na classe de visualização.
7 $ (jQuery)

É usado como um seletor que contém a função $ e executa consultas no elemento da visualização.
8 modelo

Ao renderizar a visualização, o modelo cria cópias reutilizáveis ​​de marcação e fornece acesso aos dados da instância.
9 render

Ele contém a lógica para renderizar um modelo.
10 remover

Remove uma visualização do DOM.
11 delegateEvents

Vincula elementos aos elementos DOM especificados com métodos de retorno de chamada para manipular eventos.
12 undelegateEvents

Ele remove eventos de delegação da visualização.

A classe de utilitário define um conjunto de métodos usados ​​para implementar o utilitário de backbone.

A tabela a seguir lista os métodos que você pode usar para manipular o BackboneJS-Utility -

S.No. Métodos e Descrição
1 Backbone.noConflict

Mostra o valor original do objeto Backbone e permite armazenar referência a um backbone.
2 Backbone. $

Ele permite que o Backbone use um objeto específico como biblioteca DOM.