Template assets not recompiling about handlebars_assets

[leshill]

Hi @syphoxy,

Check issue #25 for some suggestions. Let me know if you still have trouble.

[syphoxy]

I've read that ticket before. it doesn't help me much or I'm not really understanding how to fix it.

[leshill]

Hi @syphoxy,

Do you see the templates in your compiled assets if your run rake assets::precompile?

[syphoxy]

upon further investigation into the precompiled application.js I can see the template assets in there but for some reason it's not working. it still says that the function isn't defined.

[leshill]

Hi @syphoxy,

Hmm, is this an ordering problem? In application.js (or whatever your JS asset file is) require handlebars should be pulled in before you pull in the templates?

[leshill]

Hi @johnschult,

Are the templates in the complied application.js? Do you have a gist of your setup that I can run locally to see the problem?

[johnschult]

+1

Except that it doesn't work at all in development for me.

Gemfile

group :assets do
  gem 'handlebars_assets'
  ...
end

application.rb

if defined?(HandlebarsAssets)
  HandlebarsAssets::Config.template_namespace = 'JST'
end

application.js.coffee

JST['items/item']({foo: "bar"})

app/assets/javascripts/templates/items/item.html.hbs

<div>{{foo}}</div>

[leshill]

Hi @johnschult,

What version of the gem is running?

[johnschult]

handlebars_assets (0.6.4)

There isn't any conflict when using with the handlebars-rails gem is there?

[johnschult]

application.js.coffee

#= require handlebars.runtime
#= require_tree ./templates

Also, this is Rails 3.2.8...

[leshill]

Hi @johnschult,

No idea on handlebars-rails, why do you need both? (I would remove it and try that :)

And one thing I am seeing, which is currently not tested in any way by me is that your application.js is CoffeeScript.

CoffeeScript wraps everything inside an anonymous scope, so it is possible that HandlebarsTemplates are in there :(

Would you try a pure JS application.js and report back?

[johnschult]

I tested with and without handlebars-rails. It makes no difference. I was under the impression that handlebars_assets and handlebars-rails were mutually exclusive as far as functionality? I was using handlebars-rails so that I could use the templates in Ruby and JS.

Changing to use application.js would be a major undertaking for me. I have quite a bit of stuff in CoffeeScript and I am not really looking to stop using it.

[johnschult]

If it was getting wrapped under the anonymous scope, Handlebars would not be available in the JS console, but it is. Correct?

[leshill]

Hi @johnschult,

Yes.

Are the templates in the compiled application.js? Turning off config.assets.compress will make it easier to see.

[johnschult]

application.js (after compilation)

$(function() {
    var $container, $errorInput, $pagination, resetUrlEntry;
    JST['items/item']({
      foo: "bar"
    });
    ...

Which brings me to the problem in the browser:

Uncaught ReferenceError: JST is not defined 

That's the only thing I can see related to the template. I assume there is supposed to be more?

[johnschult]

This looks pretty suspicious.... right at the end of application.js.

Handlebars.template = Handlebars.VM.template;
;
(function() {



}).call(this);

[leshill]

Hi @johnschult,

If everything is setup correctly, inside of application.js you should see this line:

this.JST['items/item'] = Handlebars.template(...

because you are using the JST namespace.

Debugging via github issues is a pain :(

[johnschult]

Clearly I have something wrong, or more likely CoffeeScript is messing with me. I am happy to work with you on this further if you care, but I am losgin interest quickly ;-) I only need this for one small template right n ow, and it gets used a lot on the inde page so I wanted to make sure it was precompiled. I can just do that myself for now.

Sorry to drop off, but I need to get some work done tonight :-0 Thanks for your many replies man!

[leshill]

Hi @johnschult,

No worries! Good luck.

[syphoxy]

Thank you, @leshill. we ended up figuring out the problem that day.

the javascript assets were being loaded in the wrong order due to a //= require_directory . directive so the templates were coming in after the javascript that used them.

[leshill]

Hi @syphoxy,

Awesome! Good to know.

[brooksjbr]

Hi leshill,

I'm running into a similar issue. I'm getting the same 'Uncaught ReferenceError: HandlebarsTemplates is not defined' when trying to reference my hbs template. This is in dev and I'm not using coffeescript.

My application.js looks like this.
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require mustache
//= handlebars.runtime.js
//= require_tree ./templates
//= require_tree .

When I view source I can see handlebars.js was loaded, not sure what I'm missing. Any ideas?

[leshill]

Hi @brooksjbr,

Do you see the HandlebarsTemplates global in the JS inspector? Do you see the templates when you view source?

[brooksjbr]

Hey @leshill,

Thanks for the quick response. I don't see HandlebarsTemplates in the js console.

[leshill]

Hi @brooksjbr,

How about when you view source?

[brooksjbr]

Hey @leshill,

I was able to figure out the issue. Another thing I encountered was my template index.js was getting loaded before handlebars.js which threw an error. I ended up moving //= require_tree ./templates to the bottom of my js manifest to resolve it. Is there's a preferred method to deal with load order in a case like that?

Also, I'm a little fuzzy about the index.js. Is this compiled per request or cached somewhere? I assume when assets are precompiled all the templates are added to the application.js. Is that correct?

Thanks for your help and creating the gem.

[leshill]

Hi @brooksjbr,

Unfortunately no, the load system in the asset pipeline is very simple.

Not sure what the question about index.js is, but just to be clear, you should be naming your handlebars templates something like index.hbs.

By default, in development, the files will watched and reloaded when changed (with some caveats). And yes, when precompiling all the required assets are pulled into the application.js file.