Zen Mojo Default Page Manager and Helper Plugins

The $content Layout Object

The $content layout object can contain arbitrary HTML, as long as that HTML is well-formed. For example:

  var htmlstring =        '<h2>The Demo Team</h2>'
  htmlstring=htmlstring + '<p><strong>You have been invited to a meeting in Boston</strong></p>';
  htmlstring=htmlstring + '<p>Are you available tomorrow at 10am?</p>';
  htmlstring=htmlstring + '<p class="ui-li-aside"><strong>6:24 </strong>PM</p>'
  myLayout = {
    children: [ { type: '$content', title: '$content demo', content:htmlstring } ]
  }

The $if Layout Object

The $if layout object is used to control whether a page displays specific objects. The $if object provides the properties value, expectedValue, and children. If value equals expectedValue, then Zen Mojo renders the layout objects provided in the children property; otherwise, Zen Mojo does not render anything for the $if object.

The $loop Layout Object

The $loop layout object is a general-purpose iterator. Use this, for example, to create a table that has a varying number of rows; see an example in ZMdemo.html5.baseTemplateOpens in a new tab. Many of the other plugins use $loop objects internally. Note that loops can be nested.

In special cases, a layout object provides variables that you can use within the layout graph. For example, the default Mojo helper plugin provides the layout object $loop, which provides several variables including $loopindex, $loopnumber, and $loopValue.

To refer to the variable variablename, use the syntax '=[variablename]'

The following example shows a reference to the $loopValue variable. This example also uses the $div layout object from the HTML5 helper plugin.

    myLayout = {
        children: [
            { type: '$loop', title: 'Basic $loop demo', value:['apples','bananas','coconuts'],
             children: [
              {type:'$div', $content:'=[$loopValue]'}
             ]}
        ]
    }

In general, to use the $loop object:

• Specify its value property, which is an array. The number of items in the value array determines the number of items in the loop.

  Each array item can be an object, an array, or a literal value. If the array items are objects, each object should typically have the same set of properties. Similarly, if the array items are arrays, each array should have the same structure.

• Specify its children property, which is an array of layout objects. The loop will contain one set of these objects for each item in the value array.

  For these layout objects, you can refer the current item of the value array. To do so, use the syntax '=[value to obtain]'.

  For example, if the array items are objects, use '=[property]', where property is a property of any object in the array. (You can refer to properties of properties, and so on, as well, via dot syntax.)

Example: Basic $loop demo

The following shows an example that also uses the $div object from the Zen Mojo HTML5 helper plugin:

  myLayout = { children: [
    { type: '$loop', title: 'Basic $loop demo', 
      value:[
        {product:'apples',  sku:'SKU-001'},
        {product:'bananas', sku:'SKU-002'},
        {product:'coconuts',sku:'SKU-003'}
      ],
      children: [ {type:'$div', title:'=[product]', $content:'=[sku]'} ]
    }
  ]}

Variables Available within a $loop

When you use $loop, the following variables are available within your layout graph, in addition to any variables you create:

• $loopIndex is the 0–based index for the loop iteration.

• $loopNumber is the loop count. This variable equals $loopIndex + 1.

• $loopValue is the current array item from the value property.

• $loopKey is tbd

  For any layout object within a $loop, Zen Mojo provides the following composite value for the key property of that object: elementkey:index where elementkey is the value of the key property for this layout object, as defined in your method, and index is the 0–based index for the loop iteration.

Example: $loop used with the $loopValue variable

The following example uses an array of strings for the value property and uses the $loopValue variable to display each of them in turn. Like the previous example, it uses the $div layout object from the HTML5 helper plugin.

  myLayout = { children: [
    { type: '$loop', title: 'Basic $loop demo', 
      value:['apples','bananas','coconuts'],
      children: [ {type:'$div', $content:'=[$loopValue]'} ]
    }
  ]}