Question

I’m using the backbone-on-rails gem with javascript (as opposed to coffeescript) to render views for a model. Everything works fine, but my view code is kind of long so I’d like to refactor things out to use includes/partials.

Heres’ my code:

in my views/model_show.js file

AppName.Views.ModelNameShow = Backbone.View.extend({

  template: JST['main'],

  initialize: function() {
    this.render();
  },

  render: function() {
    this.model.fetch({async:false});
    $(this.el).html(this.template({ model: this.model }))
    $('#main_content').html(this.el);
  }

});

in my templates file I’d like to so something like this in templates/main.jst.ejs

<% if(this.model) { %>
    <h2> model found</h2> 
    <%- include top_section %>
    <%- include middle_section %>
    <%- include bottom_section %>
<% } else { %> 
    <h3>Claim not found <a href='#'>Back</a></h3> 
<% } %>

where top_section would be a file under templates (like templates/top_section.jst.ejs)

Problem is I keep getting the following errors (firebug output).

SyntaxError: missing ) in parenthetical [Break On This Error]

…2> model found \n\t’,(”+ include top_section ).replace(/&/g,
‘&’).replace(/

which causes this error because the template isn’t rendered

TypeError: this.template is not a function
[Break On This Error]   

$(this.el).html(this.template({ model: this.model }))

I should mention that I’ve tried a few different syntaxes like the ones below, but those just throw different errors.

<%= include top_section %>
<%- include(top_section) %>

Thanks in advance

Answer 1

As a stop-gap for now I just created a hash of templates and enumerate over them in the render. Not ideal, but works for now. Here’s what the code looks like now.

views/model_show.js file

AppName.Views.ModelNameShow = Backbone.View.extend({

  templates: {
    top_section: JST['top_section'],
    middle_section: JST['middle_section'],
    bottom_section: JST['bottom_section']
  },

  initialize: function() {
    this.render();
  },

  render: function() {
    this.model.fetch({async:false});
    var zuper = this;
    $.each(this.templates, function(key, value) {
      //iterate over each template and set the html for the div with id=key with template
      //For example $('#top_section).html(JST template for top_section)
      $('#' + key).html(zuper.templates[key]({ model: zuper.model }))
    })
  }

});

template file looks like this now.

<% if(this.model) { %>
    <h2> model found</h2> 
    <div id="top_section"/>
    <div id="middle_section"/>
    <div id="include bottom_section"/>
<% } else { %> 
    <h3>Model not found <a href='#'>Back</a></h3> 
<% } %>

As I said — not ideal, but a functional workaround for now.