Jade 3.x templates : Passing blocks to include

Question

My structue is the following:

Hi have a heading a template called "heading"it looks like this

div.span4
    block headingleft
div.span3
    block headingright

what I am trying to achieve is , from my main page I want to pass block values for headingleft and heading right, i.e. something like

div
include heading
    block headingleft
          a IamLeft 
    block headingright
          a IamRight

But the behavior for the code is: instead of putting "IamLeft" in .span4 and IamRight in .span3 it is putting both under .span3 as if it was just normal jade append

Answer 1

I'll give it a try and explain some essentials since you're probably mixing up some jade techniques and got confused by the definition of "blocks".

I'll give you two examples targeting your use-case (with slight modifications):

includes

Using the include technique means you substitute content of your master (layout) template by the contents of other template files. When including other jade template files you may pass additional content to the included file to be appended or yielded at some place.

main.jade:

div
  include heading
    div.span3
      a IamSomewhatRight

heading.jade:

div.span4
  a IamLeft
div.span3
  a IamRight

Result:

 div
   div.span4
     a IamLeft
   div.span3
     a IamRight
   div.span3
      a IamSomewhatRight

As you see, the additional and optional content, i.e. the block below include heading, is by default appended to the content of the include file. Use the keyword yield to define the exact place for substitution. Please note that this has nothing to do with block definitions that are defined by the keyword block as explained below.

Blocks

If you define blocks within a master template, you can extend this template for concrete use and describe how to substitute these blocks - that is done within your inherited template:

main.jade:

div
  block headingleft
  block headingright

heading.jade:

extends main

block headingleft
  div.span4
    a IamLeft 

block headingright
  div.span3
    a IamRight
  div.span3
    a IamSomewhatRight

Result is exactly as the result in the "Includes" example. Of course it may make sense here to transform your heading.jade into some myview.jade and cover the whole page generation.

Now, there are different situations and requirements for using either includes or blocks or both of them combined in various ways for composing your views (and it's kind of philosophy!). Using inheritance is - in my opinion - a nice way to eliminate the repetition of several "main files" - or some kind of controller based view composition techniques defining placeholder variables (or whatsoever) which often results in cluttered code that does not follow the "separation of concerns" approach.