A visualização no backbone é usada para refletir a aparência do modelo em seu aplicativo. Eles ouvem eventos e respondem de acordo.
No próximo tutorial, não vou dizer como vincular o modelo e a coleção para visualizar, mas discutirei principalmente como a exibição usa as bibliotecas de modelos JavaScript, especialmente o _.js de JavaScript.
Aqui usamos o jQuery para manipular elementos DOM. Obviamente, você também pode usar outras bibliotecas, como MooTools ou Sizzle, mas a documentação oficial do Backbone recomenda que usemos o jQuery.
Em seguida, usamos a caixa de pesquisa como exemplo para criar uma nova visualização:
SearchView = backbone.view.extend ({Initialize: function () {alert ("Bem -vindo ao backbone!");}}); Var pesquisa_view = new SearchView ();Seja um modelo, visualização ou coleta, o método Initialize () será disparado automaticamente quando instanciado.
El atributo
O atributo EL refere -se a um objeto DOM que foi criado no navegador. Cada visualização tem um atributo EL. Se não estiver definido, a espinha dorsal criará um elemento div emítrgo como o atributo EL.
Vamos criar uma propriedade EL para a exibição e defini -la como #Search_Containe.
<div id = "search_container"> </div> <script type = "text/javascript"> searchview = backbone.view.extend ({Initialize: function () {alert ("Bem -vindo ao backbone!");}}); var search_view = new SearchView ({el: $ ("#Search_Container")}); </sCript>Neste momento, o atributo EL da visualização refere -se ao elemento div cujo ID é Search_Container. Estamos vinculados a esse elemento div neste momento; portanto, qualquer evento que queremos acionar deve estar nesse elemento div.
Modelos de carregamento
A espinha dorsal depende fortemente do subscore.js, para que possamos usar pequenos modelos no subscore.js.
Agora, vamos adicionar um método render () e chamá -lo no Initialize () para que o método render () seja acionado automaticamente quando a visualização for inicializada.
Este método render () carregará o modelo na propriedade EL da vista através do jQuery.
<script type = "text/modelo" id = "search_template"> <breting> search </celt> <input type = "text" id = "search_input"/> <input type = "button" id = "search_button" = "pesquisa"/> </cript> <divid = "search_contAin"> </divind = " Backbone.view.extend ({Initialize: function () {this.render ();}, render: function () {// via subscore compilar e gerar modelo var modelo = _.template ($ ("#search_template"). Html (), {}); }); var search_view = new SearchView ({el: $ ("#Search_Container")}); </sCript>Adicione eventos de escuta
Utilizamos a propriedade Events of the View para adicionar eventos de escuta, lembrando que os eventos de escuta só podem ser adicionados aos elementos filhos da propriedade EL. Agora, vamos adicionar um evento de escuta ao botão Child Element.
<script type = "text/modelo" id = "search_template"> <breting> search </celt> <input type = "text" id = "search_input"/> <input type = "button" id = "search_button" = "pesquisa"/> </cript> <divid = "search_contAin"> </divind = " Backbone.view.extend ({Initialize: function () {this.render ();}, render: function () {var modelo = _.template ($ ("#search_template"). Html (), {}); function (evento) {// Quando o botão é clicado, alerta ALERT ("Pesquise" + $ ("#Search_input"). Val ()); var search_view = new SearchView ({el: $ ("#Search_Container")}); </sCript>Passe os parâmetros para o modelo
O modelo pode usar os parâmetros passados da exibição na forma de < %= %>.
<script type = "text/modelo" id = "search_template"> <!-use os parâmetros passados através de < %= %>-> <belt> < %= search_label %> </label> <input type = "text" id = "search_input"/> <input type = "" id = "" search_button ") id = "search_container"> </div> <script type = "text/javascript"> pesquhView = backbone.view.extend ({Initialize: function () {this.render ();}, render: function () {// define os parâmetros que precisam ser passados com variados = {_ab Parâmetros var modelo = _.template ($ ("#Search_template"). html (), variáveis); $ ("#busca_input"). val ()); var search_view = new SearchView ({el: $ ("#Search_Container")}); </sCript>Lidar com eventos DOM
Uma característica muito importante de visão é nos ajudar a vincular automaticamente eventos de interface. Lembre -se de como costumávamos vincular eventos às tags de interface? Talvez seja assim:
<p> <input type = "button" value = "create" id = "criate" /> <input type = "button" value = "read" id = "read" /> <input type = "button" value = "update" id = "update" /> <script type = "button" = "delete" = "elset" /> < /p> <script = "" readData () {// TODO} função updateTATA () {// TODO} função deletedata () {// TODO} função DeLetedata () {// TODO} $ ('#CREATE'). $ ('#leia'). on ('clique', readData); $ ('#update'). on ('clique', atualizada); $ ('#delete'). on ('clique', deletedata); </script>Este é um exemplo típico de vincular eventos DOM através do jQuery. Se você estiver desenvolvendo ou desenvolveu algum aplicativo complexo, pode ter tentado organizar esses códigos melhor de alguma forma, para que eles pareçam mais estruturados e mais fáceis de manter.
O objeto de visão da Backbone nos fornece um mecanismo de ligação automática para os eventos para melhor manter a relação entre DOM e eventos. Vamos dar uma olhada no exemplo a seguir:
<p id="view"> <input type="button" value="Create" id="create" /> <input type="button" value="Read" id="read" /> <input type="button" value="Update" id="update" /> <input type="button" value="Delete" id="delete" /> </p> <script type="text/javascript"> var MyView = Backbone.view.extend ({el: '#View', eventos: {'clique #Create': 'CreateData', 'Clique em #Read': 'ReadData', 'Clique em #UpDate': 'UpdatedAtAtA', 'clique #Delete': 'DeLetedata'}, Creedata: function () {/ todo}}, : function () {// TODO}, Deletedata: function () {// TODO}, Deletedata: function () {// TODO}}); var view = new MyView (); </script>Neste exemplo, colocamos 4 botões em uma tag com o ID View e associamos esta tag com a classe View MyView.
Ao definir a classe View, declaramos uma propriedade de eventos, que representa a lista de eventos do usuário na visualização, e é descrita da seguinte maneira:
Seletor de nome do evento: função do manipulador de eventosO nome do evento pode ser qualquer evento suportado pelo objeto DOM, o seletor pode ser qualquer seleção suportada por jQuery ou Zepto (incluindo seletor de etiqueta, seletor de classe, seletor de identificação etc.) e o manipulador de eventos deve ser o nome do método que foi definido na própria classe de exibição.
O objeto View analisa automaticamente a descrição na lista de eventos, ou seja, use jQuery ou Zepto para obter o objeto DOM descrito pelo seletor e vincula a função manipuladora de eventos ao nome do evento. Essas operações serão concluídas automaticamente quando a classe View for instanciada. Podemos nos preocupar mais com a estrutura da própria classe de visualização, em vez de considerar deliberadamente como vincular eventos.
Outra questão com a qual você pode se preocupar: se a estrutura DOM da visualização for gerada dinamicamente, o backbone fornece métodos correspondentes para a ligação dinâmica e a desinstalação de eventos?
Na verdade, você não precisa se preocupar com esse problema, porque os eventos nos eventos estão ligados ao elemento EL do objeto View através do método delegate (), em vez do elemento descrito pelo seletor. Portanto, não importa como a estrutura da visão muda, os eventos nos eventos são válidos.
(Se você estiver familiarizado com o jQuery, pode entender o método delegate () que ele fornece. Esse método realmente liga o evento ao elemento da camada pai e, em seguida, desencadeia o evento, verificando o elemento filho alvo durante a bolha do evento.)
O objeto View liga os eventos através do método delegate (), o que significa que não precisamos nos preocupar com o impacto das mudanças na estrutura da estrutura nos eventos. Isso também significa que o elemento correspondente ao seletor nos eventos deve estar dentro do elemento EL da exibição, caso contrário, os eventos vinculados não entrarão em vigor.
No entanto, há alguns casos em que ainda precisamos vincular manualmente e os métodos não -legateEvents () e undelegateEvents () são usados para se ligar dinamicamente e não -legateEvents (), sobre os quais você pode aprender observando a documentação da API.
Renderizar visualizações e dados
As visualizações são usadas principalmente para encadernação de eventos de interface e renderização de dados. No entanto, o objeto View fornece apenas um método render () relacionado ao render () e é um método vazio sem qualquer lógica e nenhuma referências a qualquer lugar. Precisamos sobrecarregá -lo para implementar nossa própria lógica de renderização.
A visualização pode conter muita lógica da interface. Recomenda -se que todas as subclasses da exibição sobrecarreguem o método render () e usem como método de entrada para a renderização final. No desenvolvimento da equipe, a codificação estritamente de acordo com as especificações pode ajudar os outros a entender e manter melhor seu código.