Open In App

Backbone.js $ (jQuery) View

Improve
Improve
Like Article
Like
Save
Share
Report

The $(jQuery) is a method in backbone.js view that is used to run queries scoped within the limits of the view element. when we use the jQuery method, we do not need to use model id’s within our query to fetch a specific element from a list.

So we can totally rely on HTML class attributes which are equivalent to using view.$el.find(selector) 

Syntax:

view.$(selector)

Parameter description:

  • View: It is a class that is part of the backbone.js library. it specifies how our data looks like and also handles input events from users and bind events, render, and provides user interaction.
  • Selector: It is used to specify different types of selectors i.e. class or id.

Example 1:

HTML




<!doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <title>
        Backbone.js $(jQuery) View
    </title>
    
    <style>
        div {
            width: 50px;
            height: 40px;
            margin: 5px;
            border: 3px outset green;
            float: left;
        }
  
        .starthidden {
            display: none;
        }
    </style>
    <script src=
    </script>
    <script src=
    </script>
    <script src=
            type="text/javascript">
    </script>
    <script src=
            type="text/javascript">
    </script>
</head>
  
<body style="background-color:black;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <button>Show hidden Elements</button>
    <div></div>
    <div class="hidden"></div>
    <div></div>
    <div></div>
    <div style="display:none;"></div>
  
    <script>
        var obj = Backbone.View.extend({
            initialize: function () {
                $("div:visible").click(function () {
                    $(this).css("background", "yellow");
                });
                $("button").click(function () {
                    $("div:hidden").show("fast");
                });
            }
        });
        $("div:visible").click(function () {
            $(this).css("background", "yellow");
        });
        $("button").click(function () {
            $("div:hidden").show("fast");
        });
        var example = new obj();
    </script>
</body>
  
</html>


Output:

 

Example 2:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Backbone.js $ (jQuery) View</title>
        type="text/javascript"></script>
    <script src=
        type="text/javascript">
    </script>
    <script src=
        type="text/javascript">
    </script>
</head>
  
<body style="background-color:black;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
      
    <div id="A">
        <button id="btn" query-test="">
            Click Me!!
        </button>
        <span id="B"></span>
    </div>
  
    <script type="text/javascript">
        var B = $('#C');
        var info = function (data) {
            document.write(data);
        };
        var example = Backbone.View.extend({
            events: {
                'click [query-test]': 'func1',
                'click *[query-test]': 'func2',
            },
            el: $('#A'),
            func1: function () {
                info('WELCOME TO ');
            },
            func2: function () {
                info('BACKBONE.JS');
            }
        });
        var object = new example();
    </script>
</body>
  
</html>


Output:

 

Reference:  https://backbonejs.org/#View-dollar



Last Updated : 04 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads