TVML-TVOS 一起渲染超过 1 个模板

Question

我最近开始使用 TVML/TVJS，但不确定如何处理以下问题。

手头的问题是在渲染页面时在同一页面上使用多个模板，即我想在 ListTemplate 上添加 MenuBarTemplate 等等。

但如果我在页面上同时添加两者，它只会呈现 ListTemplate 而不是 MenuTemplate

这里是sn-p的代码：

<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>

对此的任何帮助都会很棒。 谢谢。

Answer 1

每页只能有一个模板。当来到menuBarTemplate 时，情况大致相同，但框架在内部呈现选定的选项卡，同时显示菜单和productTemplate

例如，获取您的 menuBarTemplate 并为第一个 menuItem 设置模板：

<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>`
}

这将默认呈现菜单栏的第一个选项卡。如果您为其他选项卡提供模板，则选项卡将在保持菜单栏的同时自动更改。