Introduction
Welcome to the "Demonstrating Backbone.js" article series. This article demonstrates how to create and use a View in Backbone.js. This article starts with the concept of Backbone.js and various components of it. Previous articles have provided an introduction to views and the implementation of views. You can get them from the following:
Display Model data within a view's method
In the following snippet we will display Model data within a “view”.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script src="backbone/Jquery.js"></script>
<script src="backbone/underscore-min.js"></script>
<script src="backbone/backbone-min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<script>
var Product = Backbone.Model.extend({
defaults: {
name: '',
Manufacturer: ''
}
});
var View = Backbone.View.extend({
initialize: function () {
var p = new Product({ name: 'Xperia', Manufacturer: 'Sony' })
this.myfunction(p);
},
myfunction: function (Model) {
console.log(Model.get('name'));
console.log(Model.get('Manufacturer'));
}
});
var myview = new View();
</script>
</form>
</body>
</html>
Here we have created an object of the Product Model within the initialize constructor of the View. Then we are calling “myfunction” and passing the Model object as an argument.
![Model data within view's method]()
Display Collection using view's function
Here we are passing a Collection of Backbone.js Models as a function parameter.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script src="backbone/Jquery.js"></script>
<script src="backbone/underscore-min.js"></script>
<script src="backbone/backbone-min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<script>
var Product = Backbone.Model.extend({
defaults: {
name: '',
manufacturer: ''
}
});
var View = Backbone.View.extend({
initialize: function () {
//create object of person model
var p1 = new Product({ name: 'Xperia', manufacturer: 'Sony' })
var p2 = new Product({ name: 'Iphone', manufacturer: 'Apple' })
var p3 = new Product({ name: 'Asha', manufacturer: 'Nokia' })
var p4 = new Product({ name: 'GalaxyGrand', manufacturer: 'Samsung' })
var productcollection = Backbone.Collection.extend({
model: Product
});
//create object of persocollection Collection
var p = new productcollection();
p.add(p1);
p.add(p2);
p.add(p3);
p.add(p4);
this.myfunction(p);
},
myfunction: function (Collection) {
//Traverse all element using each method
Collection.each(function (object) {
console.log(object.get('name') + ' ' + object.get('manufacturer'));
});
}
});
var myview = new View();
</script>
</form>
</body>
</html>
Output
![Collection using view's function]()
Summary
In this article I explained how to display Model data and Collection data. In future articles we will understand more about Models with examples.
Previous article: Demonstrating Backbone.js: Implement View Part 2