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

时间:2015-12-09 14:36:57

标签: tvos apple-tv tvml tvjs

我最近开始使用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>$9.99</text>
              <title>Buy</title>
           </buttonLockup>
        </row>
     </stack>
     <heroImg src="path to images on your server/Car_Movie_720x1080.png" />
  </banner>

  </productTemplate>

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

1 个答案:

答案 0 :(得分:3)

每页只能有一个模板。来到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>`
}

默认情况下会显示菜单栏的第一个标签。如果您为其他选项卡提供模板,则选项卡将在保持菜单栏的同时自动更改。