CODEWITHSUNDEEP
javascriptmeteorcoffeescriptpugtemplate-engine
ko0stik
ko0stik

Reputation: 658

Meteor - Coffeescript helper not fired when in the same folder as Jade

I started to use Coffeescript on my Meteor app and while in packages everything works great, I've encountered some issues while converting my js files template functions into .coffee.

Even though the coffeescript seems to be correct when I compile it, my helpers and events don't seem to be triggered when I render the web page. I don't even get an error on the web console.

I searched but couldn't find anything but this thread.

I use Jade, Coffeescript and my .coffee and .jade files are located in the same folder, giving something like :

client/templates/myTemplate/myTemplate.jade

client/templates/myTemplate/myTemplate.coffee

I tried the _ method, to rename my files to .html.jade and js.coffee but nothing worked so far. If I put the computed javascript in a myTemplate.js file, everything works.

Any thoughts?

Below is a sample of the code:

Template.loginButton.helpers
    statusText: () ->
        console.log 'anybody there?'
        if Meteor.user() then "Déconnexion" else "Connexion"

Upvotes: 1

Views: 88

Answers (2)

Andrew Mao
Andrew Mao

Reputation: 36900

Coffeescript is sensitive to indentation. The site js2.coffee is very helpful if you are new to using coffeescript. Paste your code in there and the following JS is output, showing that you have effectively generated a no-op:

Template.loginButton.helpers;

({
  statusText: function() {
    console.log('anybody there?');
    if (Meteor.user()) {
      return "Déconnexion";
    } else {
      return "Connexion";
    }
  }
});

On the other hand, with the correct indentation

Template.loginButton.helpers
  statusText: () ->
    console.log 'anybody there?'
    if Meteor.user() then "Déconnexion" else "Connexion"

you get

Template.loginButton.helpers({
  statusText: function() {
    console.log('anybody there?');
    if (Meteor.user()) {
      return "Déconnexion";
    } else {
      return "Connexion";
    }
  }
});

UPDATE: Since that wasn't the problem, note that if you're using both a third-party templating system (jade) and a third-party JS transpiler (coffeescript), you'll need to load the templating first before the JS to make sure that you can access the templates from your code. So either in your .meteor/packages (for an app), or in package.js (for a package), make sure jade comes before coffeescript.

P.S. I have been a long time coffee user, but I'm switching over to ES6 as it has most of the important features of coffee without as much chance to shoot yourself in the foot. Also, it's hard to work with people that don't know coffee.

Upvotes: 2

ko0stik
ko0stik

Reputation: 658

Thanks to Andrew, I finally found out the issue. Turns out I installed Coffeescript through npm, which did not cause any trouble while the .coffee were in a package since they are up in the loading order in any situations. But when it comes to templates and helpers, order then mattered and I guess the npm coffeescript library was compiled and executed before the .jade template could exist, causing my helpers to not be attached to any template.

Finally

meteor add coffeescript

and making sure jade was placed before coffeescript in .meteor/packages did the trick.

Upvotes: 0

Related Questions