Components and namespaces

Components

You can import components from a separate file:

#import components

html:
  head:
    title: zml
    %for style in page.stylesheets:
      base-style src=style

    %for script in page.scripts:
      script src=script
  body:
    base-menu items=pages
    {content}

The #import statement imports the file components.zml and loads its components. The component statement “base-menu” loads a component “menu” from the “base”-namespace. In this example there is a parameter for the compoment named “items”. The value “pages” is a property of the context, which can be supplied in a controller which calls the render function of the template with a template context or by using a data section.

Namespaces

The file components.zml contains a #namespace statement which set the namespace-alias for the namespace “doonx.org/base” to “base”.

The components are defined with a * star symbol followed by the name of the component.

#namespace base=doonx.org/base

*menu:
  div.menu:
    ul.navitems:
      %for item in items:
        li: {item.title}

*style:
  link rel='stylesheet' type='text/css' href='{src}'