BackboneJS View
The Backbone.js view is how your data looks like.View represent model and collcetion to the user.BackboneJS organize your interface into logical views, backed by models, each will updated independently when model changes and collection changes without having to redraw the page.View handle users input events, bind events with methods.
Following of methods that can be used to manipulate the Backbone.js views.
extend : It is used to creating a custom view class. You can to override existing the render function.
Syntax : Backbone.View.extend(properties, [classProperties])
Example
Output :
I am learing BackboneJS
constructor / initialize : Constructor is called when the view instance created."new" keyword is used for instance creation.
Syntax : new View([options])
Example
Output :
I am learing BackboneJS
el : Any views have a DOM element .BackboneJS el method defines the element that is used as the view reference.el created from the view's tagName, className, id and attributes properties, if specified.
Syntax : view.el
Example
Output :
I am learing BackboneJS
$el : $el method specifies a cached jQuery object for a view.
Syntax : view.$el()
Attributes : There are hash attributes that will be set as HTML DOM element attributes on the view el(id, class, data-properties).
Syntax : view.attributes
Example
The Backbone.js view is how your data looks like.View represent model and collcetion to the user.BackboneJS organize your interface into logical views, backed by models, each will updated independently when model changes and collection changes without having to redraw the page.View handle users input events, bind events with methods.
Following of methods that can be used to manipulate the Backbone.js views.
extend : It is used to creating a custom view class. You can to override existing the render function.
Syntax : Backbone.View.extend(properties, [classProperties])
Example
<!DOCTYPE
html>
<head>
<title>Router
Extend 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>
<script
type="text/javascript">
var
Route1 = Backbone.View.extend({
initialize:
function
() {
document.write('I
am learing BackboneJS');
}
});
var
app = new
Route1();
</script>
</head>
I am learing BackboneJS
constructor / initialize : Constructor is called when the view instance created."new" keyword is used for instance creation.
Syntax : new View([options])
Example
<!DOCTYPE
html>
<head>
<title>Router
Extend 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>
<script
type="text/javascript">
var
Route1 = Backbone.View.extend({
initialize:
function
() {
document.write('I
am learing BackboneJS');
}
});
var
app = new
Route1();
</script>
</head>
I am learing BackboneJS
el : Any views have a DOM element .BackboneJS el method defines the element that is used as the view reference.el created from the view's tagName, className, id and attributes properties, if specified.
Syntax : view.el
Example
<!DOCTYPE
html>
<head>
<title>Router
Extend 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>
<script
type="text/javascript">
var
Route1 = Backbone.View.extend({
initialize:
function
() {
document.write('I
am learing BackboneJS');
}
});
var
app = new
Route1({ el: $("myapp")
});
</script>
<div
id="myapp"></div>
</head>
Output :
I am learing BackboneJS
$el : $el method specifies a cached jQuery object for a view.
Syntax : view.$el()
Attributes : There are hash attributes that will be set as HTML DOM element attributes on the view el(id, class, data-properties).
Syntax : view.attributes
Example
<!DOCTYPE
html>
<head>
<title>Router
Extend 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>
<script
type="text/javascript">
student
= Backbone.Model.extend
({
defaults:
{
name:
"",
class:
""
}
});
var
ViewDemo = Backbone.View.extend ({
initialize:
function
()
{
document.write("The
site is: ",this.model.get("name")+"
");
");
document.write("The
site is: ",this.model.get("class")+"
");
");
}
});
var
StuObj = new
student({ name: "John",
class: "12"
});
var
myview = new
ViewDemo({ model: StuObj });
</script>
</head>
Output :
The site is: John
The site is: 12
The site is: 12
No comments:
Post a Comment