Partially render Backbone Handlebar Views

How to partially render part of a backbone view

by bharatpatil

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.backbone.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
Render part of a backbone view<br/><br/>        
After 3 seconds there will be a link below name: <br/>        
<div id="test">
</div>

<script id="PersonTemplate" type="text/x-handlebars-template">
	<div>
        {{firstName}} {{lastName}}<br/>
    <div>
    <div id="divPartial">
        <a href="{{website}}">{{website}}</a>        
    </div>
</script>

JavaScript

var PersonModel = Backbone.Model.extend({
    defaults: {
        firstName: 'Bharat',
        lastName: 'Patil',
        website: ''
    }
});
//create an instance of person model
var objPerson = new PersonModel();

var TestView = Backbone.View.extend({
    //assign model view instance
    model: objPerson,
    
    //get the template
    template: Handlebars.compile( $('#PersonTemplate').html() ),
    
    //container element
    el: '#test',
    
    render: function(){
        var that = this;       
	    var html = this.template(this.model.toJSON());
        this.$el.html(html);
                
        //partial rendering
        setTimeout(function(){
            //set value to model
            that.model.set('website', 'http://www.digitoffee.com');
            
            //again render template 
            html = that.template(that.model.toJSON());
            
            //selector to find and put content
            var selector = "#divPartial";            
            that.$el.find(selector).replaceWith($(selector, html));  
            
        },3000);
    }       
});

new TestView().render();