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;">neveropen</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;"> neveropen </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
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
… [Trackback]
[…] Info to that Topic: geeksforgeeks.org/backbone-js-jquery-view/ […]