Backbone.js setElement View
Backbone.js is a compact library used to organize JavaScript code. Another name for it is an MVC/MV* framework. If you are not familiar with MVC, it is only a user interface design paradigm. JavaScript functions make it much simpler to create a program’s user interface. Models, views, events, routers, and collections are among the building blocks offered by BackboneJS to help developers create client-side web applications.
View’s setElement method can be used to apply an existing Backbone view to a different DOM element.
Syntax:
view.setElement(element)
Used Parameter:
- element: This parameter specifies the element which is changed from the existing element to a new element.
Example 1: The code below defines how to use the setElement method in the view.
HTML
<!DOCTYPE html> < html > < head > < title >Backbone.js setElement View</ 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 > < h1 style = "color: green;" > w3wiki </ h1 > < h3 >Backbone.js setElement View</ h3 > < div id = "myview" > Enter any text: < input type = "text" /> </ div > < script type = "text/javascript" > // 'Demo' is a name of the new view class var Demo = Backbone.View.extend({ // Event triggers 'sayHi' function when // you enter the text in input tag events: { 'change input': 'Hello' }, // This function is called when the // view is instantiated initialize: function () { // 'setElement' changes the element // associated with the view this.setElement($('#myview')); }, // After entering the text, it displays the // below line on the body below the h3 Hello: function () { this.$el.html('Welcome to Gfg!! This ' + 'is a demo of the setElement ' + 'method of View'); } }); // 'demo' is a instance of the 'Demo' class var demo = new Demo; </ script > </ body > </ html > |
Output:
Example 2: The code below demonstrates how to trigger a template from a button using the setElement method.
HTML
<!DOCTYPE html> < html > < head > < title >Backbone.js setElement View</ 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 > < h1 style = "color: green;" > w3wiki </ h1 > < h3 >Backbone.js setElement View</ h3 > < div id = "myButton" > Example Button: < input type = "button" id = "hi" value = "Click me to trigger the Template" /> </ div > < script type = "text/javascript" > // 'Demo' is a name of the new view class var Demo = Backbone.View.extend({ template: _.template('This is the Example template'), events: { 'click input': 'trigger' }, // This function is called when the // view is instantiated initialize: function () { this.setElement($('#myButton')); // 'setElement' changes the element // associated with the view }, // After clicking on the button, it // displays the template trigger: function () { this.$el.html(this.template); } }); // 'demo' is a instance of the 'Demo' class var demo = new Demo; </ script > </ body > </ html > |
Output:
Reference: https://backbonejs.org/#View-setElement
Contact Us