Dynamic template loading in Backbone JS

Question

In my current project, I am working with ROR, Backbone, Underscore JS and JQuery. In one of the view I set the JST template as follows

ABC.Views.BoardView = Backbone.View.extend({

    template : changeBoard,

    // el: '#boardHolder',

    events : {
        'click .count' : 'showPlaced',
        'click #newCard' : 'newCardForm',
        'click #showCardsOverview' : 'showCardsOverview'
    },

it continues...

Also I have a function in the bottom of the page as follows

changeBoard: function(){
        var params = window.location.search.replace( "?", "" );
        var param= params.split("=");
        var boardSize = param[1];
        //return boardSize;
        if(boardSize === 4){
            'analysis/board44'
        }else{
            'analysis/board'
        }
    }

Why I wrote that function is to load different JST templates for taking the parameter from the URL. But this way is not working for me. It gives me the following error

ReferenceError: changeBoard is not defined
[Break On This Error]   

template : changeBoard,

Does anyone know how to load dynamic JST template by getting the URL parameters

Thanks

Answer 1

Check this sample: template: null,

    events: {
    },
    initialize: function () {
        if (changeTemplate) {
            this.template = "#PublicationGroupStatTemplate";
            changeTemplate = false;
        } else {
            this.template = "#PublicationGroupReportTemplate";
        }

However, you can do the same in if statement in a function.. this.changeboard. Code will be something like: initialize: this.changeboard. Hope it helps. And not too late!!

Answer 2

You have some syntax issues between Ruby and Javascript:

template: changeBoard,

The above points to a variable with name changeBoard. Later in your view you define a function called changeBoard. This is not the same thing as in Javascript a function is invoked via functionName(). I can understand this mix-up as Ruby has optional brackets whilst Javascript requires brackets when calling a function.

Also:

if(boardSize === 4){
  'analysis/board44'
}else{
  'analysis/board'
}

The above function will return undefined as no return keyword is given. Again, this is Javascript and not Ruby :)

What you want is:

changeBoard: function(){
  var params = window.location.search.replace( "?", "" );
  var param= params.split("=");
  var boardSize = param[1];
  //return boardSize;
  if(boardSize === 4){
    return 'analysis/board44';
  } else {
    return 'analysis/board';
  }
}

Setting a dynamic template is best done in the initialise function of your view:

ABC.Views.BoardView = Backbone.View.extend({

  initialise: function(){
    this.template = this.changeBoard();
  }
});

If the boardSize is ever changing then the template should be set prior to a render:

ABC.Views.BoardView = Backbone.View.extend({

  render: function(){
    this.template = this.changeBoard();
    //render code continues here
  }
});

HTH and good luck :)