Jade Documentation for conditionals sucks.

[EvanCarroll]

It's not clear how to do something like,

if is_true
    div
else
    p
span bar

And, how to put the <span>bar</span> inside of the div or p depending on if the conditional is true or not.

[TimothyGu]

Hi,

@EvanCarroll said:

It's not clear how to do something like,

if is_true
    div
else
    p
span bar

I am sorry but I do not understand the question here. What exactly are you trying to achieve?

And, how to put the <span>bar</span> inside of the div or p depending on if the conditional is true or not.

Unfortunately AFAIK there is no easy way to do this, as jade's tree builder can't build a span with two possible parents. So you can either do this:

if is_true
    div
        span bar
else
    p
        span bar

or

if is_true
    |<div>
else
    |<p>
span bar
if is_true
    |</div>
else
    |</p>

[TimothyGu]

Of course you can also abstract these things with a mixin, to eliminate the ugliness of piped text.

mixin divOrP
    if is_true
        div
            block
    else
        p
            block

+divOrP
    span bar

or

mixin contents
    span bar

if is_true
    div
        +contents
else
    p
        +contents

[acidjazz]

Why don't we just have proper documentation on conditionals so this kind of stuff can end, lets make a gitter chat room and discuss what it would be

[ForbesLindesay]

@EvanCarroll You can do something like:

#{is_true ? 'div' : 'p'}
  span bar

Or any of @TimothyGu's suggestions. Unfortunately nobody has got around to documenting the interpolation syntax.

[TimothyGu]

@ForbesLindesay said:

Unfortunately nobody has got around to documenting the interpolation syntax.

It is documented at http://jade-lang.com/reference/code/, section "Interpolation". Closing.

[acidjazz]

@ForbesLindesay did you add to the interpolation area? maybe put the conditionals exampel under there? and possibly under conditionals as well?

[TimothyGu]

@acidjazz ok, will do

[TimothyGu]

Currently blocked by ForbesLindesay/jade-brackets#13.

[mklasinc]

I would like to highlight that this is a huge issue, and several developers I talked to have voiced the same concern. The rigid if-else implementation is a major friction point in using Pug. It is true that one can use ternary operators or mixins, but being able to a symbol that clearly demarcates the end of an if-else block would make our lives so much better.

Example: Even a simple problem like conditionally changing text direction in the html tag has no straightforward solutions, because you cannot simply nest the head tag under the html tag in both conditions. I understand that the solution is either to use a ternary operator (which, however, is useless in more complex cases) or a mixin (again a hassle to put almost an entire html body into a mixin just to be able to correctly resolve one conditional).

if something
   html(dir="rtl")
else
   html
   head??

A simple symbol to clearly demarcate the end of a conditional block would be really helpful.

if something
   html(dir="rtl")
else
   html
end
   head

[droooney]

@mklasinc, I think in your example

html(dir=something && 'rtl')
  head

is much more readable :)

In more complex cases, however, you can store the intermediate results in variables and eventually use the ternary.

[mklasinc]

@droooney I understand that there are solutions out there, but they are not straightforward (=storing intermediate results in variables and using ternary), nor are they well documented, which is the rationale for this thread.

The official documentation only includes an example for the inner most child.

body
if something
   h1
   p
else
  h1
  p

A much more realistic use case involves nested conditionals, for which there is no documentation - and while the intuitive solution would be to just use an [end-if] symbol, Pug does not support that.