TVML-TVOS Render more than 1 template together

Question

I recently started working with TVML / TVJS and don’t know how to continue with the problem described below.

The problem is to use multiple templates on the same page when rendering the page, that is, I want to add the MenuBarTemplate over the ListTemplate and in a similar way.

But if I add to the page, it only displays a ListTemplate, not a MenuTemplate

Here is the code snippet:

<menuBarTemplate>
  <menuBar>
     <menuItem id="navigation_top_movies" data-identifier="list">
        <title>Top Movies</title>
     </menuItem>
     <menuItem id="navigation_genres" data-identifier="index">
        <title>Genres</title>
     </menuItem>
     <menuItem id="navigation_search" data-identifier="search">
        <title>Search</title>
     </menuItem>
     <menuItem id="navigation_edit" data-identifier="edit">
        <title>Edit</title>
     </menuItem>
     <menuItem id="navigation_settings_add" data-identifier="add_settings">
        <title>Add Settings</title>
     </menuItem>
  </menuBar>
</menuBarTemplate>
<productTemplate>
  <background>
  </background>
  <banner>
     <infoList>
        <info>
           <header>

           </header>
        </info>
     </infoList>
     <stack>
        <title>WWDC Road Trip</title>
        <row>
           <text><badge src="resource://tomato-fresh"/> 99%</text>
           <text>1hr 54min</text>
           <text>Comedy</text>
           <text>2015</text>
           <badge src="resource://mpaa-pg" class="badge" />
           <badge src="resource://cc" class="badge" />
        </row>
        <description allowsZooming="true" moreLabel="more">An aspiring developer gets a ticket to WWDC, but cant afford to fly there. Now he needs to get across country in time for the keynote, and the only person who can help him is his slacker roommate.</description>
        <text>Language information can go here</text>
        <row>
           <buttonLockup>
              <badge src="resource://button-preview" />
              <title>Preview</title>
           </buttonLockup>
           <buttonLockup type="buy">
              <text>$9.99</text>
              <title>Buy</title>
           </buttonLockup>
        </row>
     </stack>
     <heroImg src="path to images on your server/Car_Movie_720x1080.png" />
  </banner>

  </productTemplate>

Any help on this would be great. Thanks.

Answer 1

. menuBarTemplate , , , productTemplate

, menuBarTemplate :

<menuBarTemplate>
  <menuBar>
     <menuItem id="navigation_top_movies" data-identifier="list" template="${this.BASEURL}templates/productTemplate.xml.js">
        <title>Top Movies</title>
     </menuItem>
     <menuItem id="navigation_genres" data-identifier="index">
        <title>Genres</title>
     </menuItem>
     <menuItem id="navigation_search" data-identifier="search">
        <title>Search</title>
     </menuItem>
     <menuItem id="navigation_edit" data-identifier="edit">
        <title>Edit</title>
     </menuItem>
     <menuItem id="navigation_settings_add" data-identifier="add_settings">
        <title>Add Settings</title>
     </menuItem>
  </menuBar>
</menuBarTemplate>

productTemplate.xml.js:

var Template = function() { return `<?xml version="1.0" encoding="UTF-8" ?>
<document>
<productTemplate>
  <background>
  </background>
  <banner>
     <infoList>
        <info>
           <header>

           </header>
        </info>
     </infoList>
     <stack>
        <title>WWDC Road Trip</title>
        <row>
           <text><badge src="resource://tomato-fresh"/> 99%</text>
           <text>1hr 54min</text>
           <text>Comedy</text>
           <text>2015</text>
           <badge src="resource://mpaa-pg" class="badge" />
           <badge src="resource://cc" class="badge" />
        </row>
        <description allowsZooming="true" moreLabel="more">An aspiring developer gets a ticket to WWDC, but cant afford to fly there. Now he needs to get across country in time for the keynote, and the only person who can help him is his slacker roommate.</description>
        <text>Language information can go here</text>
        <row>
           <buttonLockup>
              <badge src="resource://button-preview" />
              <title>Preview</title>
           </buttonLockup>
           <buttonLockup type="buy">
              <text>$9.99</text>
              <title>Buy</title>
           </buttonLockup>
        </row>
     </stack>
     <heroImg src="path to images on your server/Car_Movie_720x1080.png" />
  </banner>

  </productTemplate>
</document>`
}

. , .