- BackboneJS Tutorial
- BackboneJS - Home
- BackboneJS - Overview
- BackboneJS - Environment Setup
- BackboneJS - Applications
- BackboneJS - Events
- BackboneJS - Model
- BackboneJS - Collection
- BackboneJS - Router
- BackboneJS - History
- BackboneJS - Sync
- BackboneJS - View
- BackboneJS - Utility
- BackboneJS Useful Resources
- BackboneJS - Quick Guide
- BackboneJS - Resources
- BackboneJS - Discussion
BackboneJS-View $(jQuery)
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