BackboneTutorials.com - What is a view?

An example to implement backbone.js view functionality

by Lien Z

HTML

<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.5/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<div id="search_container">
    <input type="text" name="search" id="search_input" />
    <input type="button" value="Search" id="search_button" />
</div>
<script type="text/template">
    
</script>

CSS

#search_input {
    height: 30px;
    font-size: 14px;
}
#search_button{
    padding: 8px;
}
.active_search{
    color: #000;
}
.inactive_search {
    color: #ccc;   
}

JavaScript

SearchView = Backbone.View.extend({
    el: $("#search_container"),
    defaultMessage: "Type here to search",
    initialize: function(){
        this.search_input = $("#search_input");
        
        // Set the default properties for a search input
        this.search_input.val( this.defaultMessage );
        this.search_input.addClass("inactive_search");
    },
    events: {
        "click #search_input": "clearDefaults",
        "focusout #search_input": "setDefaults"
    },
    clearDefaults: function(){
        if( this.search_input.hasClass("inactive_search") ){
            this.search_input.addClass("active_search")
                             .removeClass("inactive_search");
            this.search_input.val("");
        } 
    },
    setDefaults: function(){
        if( this.search_input.val() == "" ){
            if( this.search_input.hasClass("active_search") ){
                this.search_input.addClass("inactive_search")
                                 .removeClass("active_search");
                this.search_input.val( this.defaultMessage );
            }
        }
    }
    
});

var search_view = new SearchView;