Partially rendering Handlerbars from Backbone view

While working on a project I had this situation where I wanted to render a view partially after some ajax is done. In this post I will explain how to render HandlerBar views partially. For the purpose of demonstrate I will simulate delay using setTimeout() function instead of an ajax request. So for an example lets consider following setup

1. Template

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

2. Backbone Model

var PersonModel = Backbone.Model.extend({
    defaults: {
        firstName: 'Bharat',
        lastName: 'Patil',
        website: ''
    }
});

3. Backbone view using Handlerbars view

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);
    }
});

4. Container in which view will be rendered

<div id="test">
</div>

To make it easier to understand model has already been set up with the default values. Now lets go step by step to understand what exactly happens

var html = this.template(this.model.toJSON());

Above line will render your complete view and as we don't know the website of that user, there will be no link displayed in the view.

that.model.set('website', 'http://www.digitoffee.com');

Lets pretend after doing ajax now we know the website of user and our model is populated with the value

html = that.template(that.model.toJSON());

Now to update our view render template again with updated model

var selector = "#divPartial";

If you see template you can find a div with an id divPartial

that.$el.find(selector).replaceWith($(selector, html));

This is the juicy line. If you know jQuery very well you will be able to understand this quickly. What we are doing here is finding divPartial in current rendered element and replacing its content by finding the same div inside newly rendered template passing as a 2nd argument to jQuery function. jQuery function takes 2 parameters of which 2nd parameter is doing magic here by finding whats inside newly rendered template which is in html variable in step 3. If you find it difficult to understand please comment below. I have also created a jsfiddle for this which is as below