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">
        {{firstName}} {{lastName}}
  <div id="divPartial">
        <a href="{{website}}">{{website}}</a>
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());

        //partial rendering
            //set value to model
            that.model.set('website', '');

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

4. Container in which view will be rendered
<div id="test">
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', '');
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


Popular posts from this blog

How to get local time from UTC using Moment.JS

Measure the height of keyboard on PhoneGap app using jQuery

6 steps to create local copy of your live WordPress site