Handling mustache indentation in Jade/Slim templates

[Robert Hall]

Consider the following valid Jade or Slim code:

| {{#if someVariableIsTrue}}

| {{#if showComponentOne}}

ComponentOne

| {{/if}}

| {{#if showComponentTwo}}

ComponentTwo

| {{/if}}

| {{/if}}

Versus a more readable but invalid structure:

| {{#if someVariableIsTrue}}

| {{#if showComponentOne}}

ComponentOne

| {{/if}}

| {{#if showComponentTwo}}

ComponentTwo

| {{/if}}

| {{/if}}

The first is valid, the second, while more readable, breaks the Jade/Slim parser.

Now imagine an application FULL of nested if statements and it starts to get a little gangly and very very unreadable.

Does anyone have a solution to this problem? The pipe | character is necessary to output the mustaches in the first place, but it makes code impossible to indent in any readable way.

(Some of you work in HTML, which can be nested however wanted; this is not that problem. This is Jade/Slim.)

[Marty Nelson]

Based on this SO, you could do something like:

mixin if(exp)
  != '{{#if ' + exp + '}}'
  block
  != '{{/if}}'
 
+if('someVariableIsTrue')
  +if('showComponentOne')
    ComponentOne
 
  +if('showComponentTwo')
    ComponentTwo

see http://codepen.io/martypdx/pen/ZQyaKP

While I don't care for having to pass the expression as a string, it does provide full block semantics.

[Robert Hall]

This is really helpful. Since I work in *both* Slim (at work) and Jade (personal) projects, I hope I can figure out an equivalent Slim version. This at least gives me a starting point.

Thanks!

- Robert

[Marty Nelson]

https://github.com/slim-template/slim/issues/551

--
You received this message because you are subscribed to the Google Groups "Ractive.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to ractive-js+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Robert Hall]

Just found this awesome gem, FYI, for anyone looking for an alternative SLIM solution in the future:

https://github.com/beno/slim-mustache

It's not perfect; doesn't support `else` syntax, but that can be navigated still the old way:

~if someVariableIsTrue

~#if showComponentOne

ComponentOne

| {{else}}

ComponentTwo