13

I don't really like the jade syntax and was wondering if I could do this simple comparison using hoganJS instead?

The example code is written in JADE.

I did some googling and there seems to be mixed opinion.. I just want to know if there is a way or will I need to change something?

if user
 li
   a(href='/dashboard') Dashbaord
 li
   a(href='/logout') Logout
else
 li
   a(href='/login') Logi§n

block body
user61026
  • 285
  • 2
  • 13

1 Answers1

30

Hogan is an implementation of Mustache so the same syntax applies.

{{#user}}
  <li><a href="/dashboard">Dashboard</a></li>
  <li><a href="/logout">Logout</a></li>
{{/user}}
{{^user}}
  <li><a href="/login">Login</a></li>
{{/user}}

PS I used to debate whether to use Hogan or some other Mustache implementation over Handlebars because it was little faster/lighter. My advice is to use Handlebars not Hogan, and compile your front end and only use Handlebars runtime on build - because it has nicer conditional syntax and supports a few more useful things without going too over the top.

In Handlebars it would be the cleaner:

{{#if user}}
...
{{else}}
...
{{/if}

But anyway Hogan is still nice, so your choice. I also don't like Jade it reminds me of CoffeeScript or something.

Dominic
  • 62,658
  • 20
  • 139
  • 163
  • 1
    Cheers mate, I had actually completely forgotten about handlebars. Cheers for all the help! :) – user61026 Jul 26 '14 at 11:39
  • just another quick question can hogan templates inherit from one another? – user61026 Jul 26 '14 at 12:12
  • 1
    @user61026 yes you can, the syntax is like `{{> myPartialName}}` not exactly sure the default path to them. There is also a second param to the render method which can take partials as an option but I think that is optional - docs are a little vague: http://twitter.github.io/hogan.js/. Try just adding one and you might get an error that will tell you where it expected the partial to be located. – Dominic Jul 26 '14 at 20:19
  • @DominicTobias This answer helped me a lot, thanks man. I take it `{{#user}}` is equivalent to `{{#if user}}` and `{{^user}}` is equivalent to `{{else}}`? – Jay Jul 31 '15 at 21:44
  • @Wade np! yep pretty much, actually literally speaking the Mustache one is `if (user) { ..stuff.. } if (!user) {..stuff..}` - but it's the equivalent of an else, just more verbose – Dominic Aug 01 '15 at 01:34