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


Jackie Co Kad said…
Great Article
android based projects

Java Training in Chennai

Project Center in Chennai

Java Training in Chennai

projects for cse

The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing,

and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training Project Centers in Chennai

Android Final Year Project Ideas for Computer Science. IEEE Android Projects for CSE 2020 - 2021 - WISEN

Popular posts from this blog

How to get local time from UTC using Moment.JS

Step by step Cordova calabash-ios automation

Measure the height of keyboard on PhoneGap app using jQuery