jade compatibility

[Mark Shust]

If I create a layout template file in jade (https://github.com/mquandalle/meteor-jade), the initial transition kicks off, then the following route is completely blank:

template(name="frontend")
  .transitions-container(style="height:100%")
    +yield

If I remake the template in html, everything works:

<template name="frontend">
  <div class="transitions-container" style="height:100%">
    {{> yield}}
  </div>
</template>

Is this a bug with transitions, or meteor-jade?

[Jamie Loberman]

Hi @markoshust - tbh I've never used Jade before. Do you have a public facing example I can look at?

[Mark Shust]

I don't, however if you remove the frontend template (html), and just make a new file with templates.jade with the above content, that would be a good example.

[Mark Shust]

Referencing https://github.com/jamielob/transitions-demo as example

[Jamie Loberman]

I unfortunately don't have time right now to investigate but as a guess I would think it will be related to how I'm attaching _uihooks to the container. Possibly that it's firing before Jade is ready for it.

[mibcadet]

Same situation here, not working:

.transitions-container(style="height:100%")
    +yield

[Jamie Loberman]

I can try and take a look if someone puts together a git repo with a reproducing case for me.

[mibcadet]

Maybe next week I will, due to lack of time I have to skip this function at the moment :(

[Mark Shust]

here you go... i just switched the layout template from transitions.html to transitions.jade -- that does it

https://github.com/markoshust/transitions-demo-jade

[mibcadet]

Seriously you think I have jade template not in .jade file?? ...

EDIT: mymissunderstanding, pardon

[Jamie Loberman]

@mibcadet - I think @markoshust was providing me with the example I requested not providing you with an answer.

[mibcadet]

@jamielob You must be right

[Jamie Loberman]

@markoshust - thanks for this. It looks like the 'next' property in the insertElement: function(node, next) _uihooks callback is blank when using Jade. I'm looking for a workaround but it looks like it may be a bug with the meteor _uihooks.

[Mark Shust]

@mibcadet yes sorry, reread my post and i wasn't completely clear. that was an example of jade implemented, not working.

[Dave Lee]

I'm using another package https://atmospherejs.com/ccorcos/transitioner and have similar issue. i.e. The top level .jade template doesn't work but standard html template does. If you take a look at the compiled template, you'll find the code from .jade is much cleaner than that from html template (with some extra newline , non display stuff etc...). Maybe it's too "clean" for transitioner to work ? Anyway it's only the top level template, so I didn't investigate. Just to report here.

[Jamie Loberman]

Thanks @daveeel.

[Dave Lee]

Another observation of using https://atmospherejs.com/ccorcos/transitioner with .jade is that sometimes some transition effects will prevent reactive content to render in "to" routes. I'll see if I could isolate them in future. Not sure if this package has similar issue.

I'm looking into this transitioner because of it's inline transition feature missing in other packages. :)

[Greg Antrim]

Since it wasn't specifically mentioned above, you can still use jade templates for everything besides your layout file. Im doing the following as a temporary workaround.

layout.html:

<template name="layout">  
    <div class="transitions-container" style="height:100%">
        {{> yield}}
    </div>
</template>

home.tpl.jade:

.transitions-content    
        a.home-menu-link(href="{{pathFor 'page2'}}" data-transition-out="slideFadeLeftOut" data-transition-in="slideFadeRightIn") page2     

page2.tpl.jade

.transitions-content
        | page2

[Jamie Loberman]

Thanks @gantrim - If you get the time to send a PR for the Readme about how to get it working with Jade that would be great.