BackboneJS-View $(jQuery)


Advertisements

Description

If jQuery is included on the page, each view has a $ function that runs queries scoped within the view's element. If you use this scoped jQuery function, you don't have to use model ids as part of your query to pull out specific elements in a list, and can rely much more on HTML class attributes. It's equivalent to running: view.$el.find(selector)

Syntax

view.$(selector)

Parameters:

  • selector: It uses the different types of selectors such as id or class.

Example

<!DOCTYPE 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="myVal">
        <button id="button" data-test="">Click Here</button>
    </div>
   <span id="myLog"></span>
      <script type="text/javascript">

        //The variable contains id selector as 'mydata'
         var myLog = $('#mydata');

         //The variable 'data' is used to display the values
         var data = function(val) {
            document.write(val);
         };

         //'ViewDemo' is a name of the view class
         var ViewDemo = Backbone.View.extend({

         //When click event occurs it activates the defined functions 'myFunc1' and 'myFunc2'
            events: {
               'click [data-test]' : 'myFunc1',
               'click *[data-test]': 'myFunc2',
            },

            //'el' uses '#myVal' as the view reference
            el: $('#myVal'),

            //When user clicks the button, it refers to the button defined within the 'div' tag and
            //it will display the below statements
            myFunc1: function () {
               data('Hello...');
            },
            myFunc2: function () {
               data('Welcome to Tutorialspoint...');
            }
        });

        //'myview' is an instance of the 'ViewDemo' class
        var myview = new ViewDemo();
      </script>
   </body>
</html>

Output

Let's carry out the following steps to see how above code works:

  • Save above code in dollar-jquery.htm file

  • Open this HTML file in a browser.

Advertisements