CODEWITHSUNDEEP
javascriptcompilationhandlebars.jsnpmgruntjs
Vivian Chen
Vivian Chen

Reputation: 223

grunt-contrib-handlebars output is different from handlebars npm task

My issue is very similar to grunt-contrib-handlebars - Output is different than when I run the handlebars npm task, but no one has answered that question so I thought I'd start my own.

I'm trying to precompile my handlebars template files into a js file. I originally used the handlebars npm task to manually compile it and the website works fine with the npm generated output. I run the following command:

handlebars *.handlebars -f template.js

Which generated the following:

    (function() {
  var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
templates['address-book-contact-form'] = template(function (Handlebars,depth0,helpers,partials,data) {
  this.compilerInfo = [2,'>= 1.0.0-rc.3'];
helpers = helpers || Handlebars.helpers; partials = partials || Handlebars.partials; data = data || {};
  var buffer = "", stack1, stack2, options, functionType="function", escapeExpression=this.escapeExpression, self=this, helperMissing=helpers.helperMissing;


  buffer += "<form class=\"dark-bg\">\n  <input type=\"hidden\" id=\"propertyId-input\" name=\"propertyId\" value=\"";
  if (stack1 = helpers.propertyId) { stack1 = stack1.call(depth0, {hash:{},data:data}); }
  else { stack1 = depth0.propertyId; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; }
  buffer += escapeExpression(stack1)
    + "\"/>\n\n  ";
  stack1 = self.invokePartial(partials['partial-overlay-nav'], 'partial-overlay-nav', depth0, helpers, partials, data);
  if(stack1 || stack1 === 0) { buffer += stack1; }
  buffer += "\n  \n <div class=\"property-fields-wrapper\">\n  <fieldset>\n    <div class=\"address-book-form row\"> \n      \n      <div class=\"span3\">\n        <h4>Info</h4>\n        ";
  options = {hash:{},data:data};
  stack2 = ((stack1 = helpers.inputField),stack1 ? stack1.call(depth0, "name", "Business Name", depth0.name, true, options) : helperMissing.call(depth0, "inputField", "name", "Business Name", depth0.name, true, options));
  if(stack2 || stack2 === 0) { buffer += stack2; }
  buffer += "\n        ";
  if (stack2 = helpers.addressBookContactTypeDropdown) { stack2 = stack2.call(depth0, {hash:{},data:data}); }
  else { stack2 = depth0.addressBookContactTypeDropdown; stack2 = typeof stack2 === functionType ? stack2.apply(depth0) : stack2; }
  if(stack2 || stack2 === 0) { buffer += stack2; }
  buffer += "\n        ";
  ...

Now I am trying to compile my template files using grunt with grunt-contrib-handlebars. And I get the following output:

Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
  this.compilerInfo = [4,'>= 1.0.0'];
helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
  var stack1, functionType="function";


  if (stack1 = helpers.addressBookContactFormPropertyItem) { stack1 = stack1.call(depth0, {hash:{},data:data}); }
  else { stack1 = depth0.addressBookContactFormPropertyItem; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; }
  if(stack1 || stack1 === 0) { return stack1; }
  else { return ''; }
  })

Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
  this.compilerInfo = [4,'>= 1.0.0'];
helpers = this.merge(helpers, Handlebars.helpers); data = data || {};



  return "<div class=\"address-book-property-selection-wrapper\">\n <div class=\"dk_container dk_theme_default\" id=\"dk_container_address-book-properties-input\" style=\"display: block;\">\n     <a class=\"dk_toggle\"><span class=\"dk_label\">Property</span></a>\n   </div>\n    <div class=\"address-book-properties-container\">\n     <div class=\"address-book-properties-search-container\">\n          <input type=\"text\" class=\"span3\" id=\"address-book-properties-search-input\" placeholder=\"\" />\n      </div>\n        <ul class=\"collection\"></ul>\n    </div>\n</div>";
  })

Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
  this.compilerInfo = [4,'>= 1.0.0'];
helpers = this.merge(helpers, Handlebars.helpers); partials = this.merge(partials, Handlebars.partials); data = data || {};
  var buffer = "", stack1, stack2, options, functionType="function", escapeExpression=this.escapeExpression, self=this, helperMissing=helpers.helperMissing;


  buffer += "<form class=\"dark-bg\">\n  <input type=\"hidden\" id=\"propertyId-input\" name=\"propertyId\" value=\"";
  if (stack1 = helpers.propertyId) { stack1 = stack1.call(depth0, {hash:{},data:data}); }
  else { stack1 = depth0.propertyId; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; }
  buffer += escapeExpression(stack1)
    + "\"/>\n\n  ";
  ...

Can someone shed some advice on the situation? I cannot figure out why the outputs are different and how to make my grunt output be the same as the manual npm handlebars compile.

Upvotes: 3

Views: 509

Answers (3)

Igor Scabini
Igor Scabini

Reputation: 121

I solved the issue defining a function for processName and defining a static namespace, as i wrote in grunt-contrib-handlebars - Output is different than when I run the handlebars npm task, here is a snippet from my Gruntfile:

handlebars: {
  compile: {
    options: {
      namespace: 'Handlebars.templates',
      processName: function(filename) {
          var name = filenaname.split('/')[1].split('.');
          return name[0];
      },
      wrapped: true,
      commonjs: null
    },
    files: {
      "js/articles/templates.js": "handlebars/article_snippet.handlebars",
    }
  }
},

Upvotes: 0

Maruku
Maruku

Reputation: 468

Or use https://github.com/mattacular/grunt-handlebars-compiler instead, it works for me and do not need to check the version problem.

Upvotes: 0

Sasha Ko
Sasha Ko

Reputation: 112

Outputs are different because your compiler versions are different.

Upvotes: 0

Related Questions