BackboneJS - Ver delegateEvents

Descrição

Vincula elementos aos elementos DOM especificados com métodos de retorno de chamada para manipular eventos. Se os eventos forem removidos da visão, este método pode ser usado para anexar os eventos à visão.

Sintaxe

delegateEvents(events)

Parâmetros

events - Fornece eventos que são necessários para reconectar à visualização.

Exemplo

<!DOCTYPE html>
<html>
   <head>
      <title>View 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>
   
   <body>
      <div id = "mydiv"></div>
      <script type = "text/javascript">
         
         //'ViewDemo' is a name of the view class
         var ViewDemo = Backbone.View.extend ({

            //When click event occurs it activates the defined function 'delegateFunc'
            events: {
               'click button': 'delegateFunc'
            },
            delegateFunc: function () {
               this.remove();   //The 'remove()' method removes the view from the DOM
               document.write("Welcome to Tutorialspoint...");
            },

            //'render' provides the logic required to construct the view
            render: function () {

               //'$el' is cached object that push the content defined within it and
               //display the value when user clicks the button
               this.$el.html('<button>Click to delegate events</button>');
            },

            //This function is called when the view is instantiated
            initialize:function() {
               this.render();
            }
         });

         //'myview' is an instance of the 'ViewDemo' class
         var myview = new ViewDemo({el: '#mydiv'});   //'el' defines which element to be used as the view reference

         //Here defining the events which are reattaching to the view 
         //using 'delegateEvents()' method
         myview.delegateEvents();
      </script>
      
   </body>
</html>

Resultado

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

Salve o código acima no delegateevents.htm Arquivo.
Abra este arquivo HTML em um navegador.

↰ Previous page