define(['jquery', 'underscore', 'backbone','text!controls/header/headerTemplate.html'],
    function($, _, Backbone, headerTemplate){

        var header = Backbone.View.extend({

            title: "",

            initialize : function (options) {
                this.title = options.title;
            },

            //initialize template
            template:_.template(headerTemplate),

            //render the content into div of view
            render: function(){
                this.$el.attr('data-role', 'header');
                this.$el.attr('data-position', 'fixed');
                this.$el.attr('data-tap-toggle', 'false');
                //this.el is the root element of Backbone.View. By default, it is a div.
                //$el is cached jQuery object for the view's element.
                //append the compiled template into view div container
                this.$el.append(this.template( { "title":this.title } ));

                //return to enable chained calls
                return this;
            }
        });
        return header;
    });