Subscribe via RSS Feed

Backbone.js View in Client Side Javascript MVC – with Java based Web Project – Part 3

April 28, 2013 4 Comments


This article is extension of Backbone.js based Application with Java based web project.

The project code can be downloaded here.

Backbone.js views are used to render client side application data model. They are used to listen events and work as per that. We will explain view functionality with JavaScript template library within our application for one of our view.

window.HeaderView = Backbone.View.extend({

    template:_.template($('#tpl-header').html()), // Here template controls the DOM Element in the HTML.

    initialize:function () {
       // This function will be called at the initialisation of a View...
        this.render(); // render function loads the template in the el property of backbone.js
    },

    render:function (eventName) {
        $(this.el).html(this.template());
        // Above el is a property of backbone view. This is created as empty div element in browser and the control on        
        // the Div element is done completely by the Backbone.js. As this binds the container element, all the events 
        // will trigger for this element. 
        return this;
    },

    events:{
        "click .new":"newWine" 
        // here the listening for click event is happening. And it will call the mapped newWine function 
    },

    newWine:function (event) {
        // when Button is clicked, this function is called for the Click event trigger.
        app.navigate("wines/new", true);
        return false;
    }
});

More Resources :

What is a view?

Backbone.js Tutorial: List Views

Other Resources you may have interest :

1> Developing Java web applications with Backbone.js

2> Backbone.js in Client Side Javascript MVC – with Java based Web Project

3> Backbone.js Router in Client Side Javascript MVC – with Java based Web Project – Part 2

Enter your email address:

Delivered by FeedBurner