An article

This sample shows how the table of contents and the body of an article can be printed using two subtemplates that are invoked recursively.

The view

Table of Contents
Content
  • $e.title$
  • $params.section.subsections[0]$

    $params.section.title$

    The model used in the example

    The article is modelled as an array of Section objects (whose constructor function is defined in the init section). We use a Section object to represent either an article section or a section paragraph. In the first case, the Section object has a title and, recursively, a set of subsections (array of objects of Section type). In the second case, the Section has not got title, and the subsections field is an string containing the text of the paragraph. The subtemplate will treat each Section object in a different way depending on it having or not a title.

    <script>
      // Init block
      function Section(title, subsections) {
        this.title = title;
        this.subsections = subsections;
      }
    </script>
    
    <script yst="model">
    // Model section
    sections = 
    [new Section("Intro", 
                 [new Section(null,
                              ["First paragraph of the introduction. Bla, bla, ..."]),
                  new Section(null,
                              ["Bla, bla, ..."]) 
                 ]),
     new Section("Section 1", 
                 [new Section(null,
                              ["First paragraph of the first section. Bla, bla, ..."]),
                  new Section("Section 1.1",
                              [new Section(null,
                                           ["First paragraph of section1.1. Bla, bla, ..."]),
                               new Section(null,
                                           ["Bla, bla, ..."])
                              ]),
                  new Section("Section 1.2",
                              [new Section(null,
                                           ["First paragraph of section1.2. Bla, bla, ..."]),
                               new Section(null,["Bla, bla, ..."])
                              ]) 
                 ])
    ]
    
    </script>

    The Yeast code

    We use the subtemplate indexTmpl to build the table of contents. Using a compApply this subtemplate makes up a <li> element for each one of the article sections. The subtemplate is provided with these sections by means of its set parameter (ystSet="params.set"), which is firstly assigned in the subtemplate inclusion: <div yst="include" ystIdRef="indexTmpl" ystParams="{set:sections}"></div>. We use a compApply because we do not want to generate a <li> element for each section, but only for sections having title (ystTest="e.title != null"). The compApply is: <li yst="compApply" ystSet="params.set" ystTest="e.title != null">...</li>. Each <li> element will display the title of the section ($e.title$) and a nested enumeration with the section subsections. For this enumeration we call recursively to the indexTmpl subtemplate, providing the subsections of the section as the actual set parameter in the invocation: <div yst="include" ystIdRef="indexTmpl" ystParams="{set:e.subsections}"></div>.

    The bodyTmpl subtemplate is similar to the previous one. It generates the body of the article. We call this subtemplate for each one of the sections of the article. That’s why we include the call in an apply structure, iterating over the sections: <div yst="apply" ystSet="sections"><div yst="include" ystIdRef="bodyTmpl" ystParams="{section:e, size:5}"></div></div>. The subtemplate has two formal parameters: the section to be printed and the size of the font to be used for the display of the section title (this size is initially 5, and will be decreased by one each time the subtemplate is recursively called). The subtemplate checks if the section is a paragraph (it has not got a title). If so, the text of the paragraph is printed ($params.section.subsections[0]$). But if the section is a subsection, then the title is displayed and the subtemplate is recursively called for each one of the subsections of the section, decreasing the size of the title font (ystParams="{section:e, size:$params.size-1$}”).