TVML-TVOS 同时渲染超过 1 个模板

Question

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

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

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

这是代码片段：

<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>.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>.99</text>
              <title>Buy</title>
           </buttonLockup>
        </row>
     </stack>
     <heroImg src="path to images on your server/Car_Movie_720x1080.png" />
  </banner>

  </productTemplate>
</document>`
}

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

TVML-TVOS 同时渲染超过 1 个模板

TVML-TVOS Render more then 1 Template together

tvos

apple-tv

tvml

tvjs