template-markup.md

Markup

When FruitMachine renders your modules by calling the template function, it passes some important data, in addition to any that you have explicitly declared yourself. This data includes the rendered markup from each of the module's child modules. It's up to your template function to put it in the right place.

It gives you the following data:

• An array of child modules in the form of children.
• A variable for each child View in the form of the child's slot.

This gives you the ability to print child HTML exactly where you want it, or to loop and print all children of the current View. If you don't print a module's child module's into the markup then they will not appear in the final HTML markup.

Place child modules by slot

The following example demonstrates how you can place child modules by slot.

Template markup

layout.mustache

{{{1}}}

In Layout's template we print slots by name. In this case we have named our slot '1' so we have printed {{{1}}} into our template.

apple.mustache

I am Apple

Remember: FruitMachine creates the module's root element for you, so your templates need only contain the markup for the module's contents.

Define modules

var Layout = fruitmachine.define({
	name: 'layout',
	template: layoutTemplate
});

var Apple = fruitmachine.define({
	name: 'apple',
	template: appleTemplate
});

Create assemble modules

var apple = new Apple();
var layout = new Layout();

// Add a child view
layout.add(apple, { slot: 1 });

We created an instance of our Layout module, then an instance of our Apple module. We then added the apple module as a child of the layout module. In the options object we defined which slot we wanted the apple module to sit in.

Render

layout.render();
layout.el.outerHTML;
//=> <div class="layout">
//     <div class="apple">I am Apple</div>
//   </div>

Loop and place all child modules

In some cases the number of child modules is not known, and we just want to render them all. The list.mustache template uses the special children (Array) and child (HTML string) keys to iterate and print each module's HTML. In this example we are using dummy List and Item module constructors.

Create the module

var list = new List();
var item1 = new Item({ model: { name: 'Wilson' } });
var item2 = new Item({ model: { name: 'Matt' } });
var item3 = new Item({ model: { name: 'Jim' } });

list
  .add(item1)
  .add(item2)
  .add(item3);

Template markup

list.mustache

{{#children}}
  {{{child}}}
{{#children}}

Note: It's worth noting that within the scope of the loop, the current child's model is accessible. So {{name}} within the {{#children}} loop would work.

item.mustache

My name is {{name}}

Render

layout.render();
layout.el.outerHTML;
//=> <div class="list">
//      <div class="item">My name is Wilson</div>
//      <div class="item">My name is Matt</div>
//      <div class="item">My name is Jim</div>
//   </div>

NB: id attributes have been omitted from markup examples for clarity