BackboneJS - Visualizza delegateEvents

Descrizione

Associa gli elementi agli elementi DOM specificati con metodi di callback per gestire gli eventi. Se gli eventi vengono rimossi dalla visualizzazione, questo metodo può essere utilizzato per allegare gli eventi alla visualizzazione.

Sintassi

delegateEvents(events)

Parametri

events - Fornisce eventi necessari per ricollegarsi alla visualizzazione.

Esempio

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

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

Salva il codice sopra nel file delegateevents.htm file.
Apri questo file HTML in un browser.

↰ Previous page