CODEWITHSUNDEEP
ruby-on-railsbackbone.jshandlebars.jsbackbone-views
user1344853
user1344853

Reputation: 689

Rails with Backbone.js and Handlebars

About my app:
- I use Rails 3.2.6 with backbone.js(backbone-on-rails gem) and handlebars template engine.
- Created a routes, and views, works great. My view:

  el: $('#lorem'),
  render: function(){
    var js = this.collection.toJSON();
    var template = Handlebars.compile($("#lorem2").html());
    $(this.el).html(template({articles: js}));
    console.log(js);
    return this;
  }

-I created a template (in assets dir: assets/templates/peoples/index.hbs):

<script id="lorem2" type="text/x-handlebars-template">
    {{#each articles}}
       {{this.name}}
     {{/each}}
</script>

When I refresh the page, I get this error message:

Uncaught TypeError: Cannot call method 'match' of null

I think the template file maybe wrong: 

<script src="/assets/templates/people/index.js?body=1" type="text/javascript"></script>

this contains:

    (function() {
            this.HandlebarsTemplates || (this.HandlebarsTemplates = {});
            this.HandlebarsTemplates["people/index"] = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
  helpers = helpers || Handlebars.helpers;
  var buffer = "", stack1, foundHelper, self=this, functionType="function", helperMissing=helpers.helperMissing, undef=void 0, escapeExpression=this.escapeExpression;


  buffer += "<div class=\"entry\">\n  <h1>";
  foundHelper = helpers.title;
  stack1 = foundHelper || depth0.title;
  if(typeof stack1 === functionType) { stack1 = stack1.call(depth0, { hash: {} }); }
  else if(stack1=== undef) { stack1 = helperMissing.call(depth0, "title", { hash: {} }); }
  buffer += escapeExpression(stack1) + "</h1>\n  <div class=\"body\">\n    ";
  foundHelper = helpers.body;
  stack1 = foundHelper || depth0.body;
  if(typeof stack1 === functionType) { stack1 = stack1.call(depth0, { hash: {} }); }
  else if(stack1=== undef) { stack1 = helperMissing.call(depth0, "body", { hash: {} }); }
  if(stack1 || stack1 === 0) { buffer += stack1; }
  buffer += "\n  </div>\n</div>\n";
  return buffer;});
            return HandlebarsTemplates["people/index"];
          }).call(this);

Upvotes: 1

Views: 2450

Answers (1)

mu is too short
mu is too short

Reputation: 434665

That mess in /assets/templates/people/index.js suggests that your Handlebars templates are being compiled to JavaScript before your JavaScript code would see them.

If you say $(x).html() where x doesn't match anything, you will get a null back. So you probably don't have #lorem2 in your DOM at all, you just have the compiled template in HandlebarsTemplates["people/index"]. That means that this part of your render:

var template = Handlebars.compile($("#lorem2").html());

will fail and give you your TypeError exception. Try replacing that with:

var template = HandlebarsTemplates['people/index'];

Upvotes: 2

Related Questions