apple-tv - 如何将对象传递给我正在使用的 TVML 模板文件或在其中设置变量？

Question

我正在使用来自 Apple 的 TVMLCatalog 示例文件，并且一直试图将对象传递给我在演示者中加载的模板文件(javascript 文件)。这似乎应该是一件完全初级的事情，但它让我打败了。

我有以下内容，它使用资源加载器加载模板，并将其推送到 View 。

resourceLoader.loadResource('http://localhost/mytemplate.xml.js',
                function(resource) {
                    if (resource) {
                        var doc = self.makeDocument(resource);
                        doc.addEventListener("select", self.load.bind(self));
                        navigationDocument.pushDocument(doc);
                    }
                }
            );

当模板文件加载到 View 中时，我在哪里定义对象或设置将在文档中的变量？

Answer 1

是的!您可以将变量注入(inject)您的 TVML 模板。

首先，您必须创建一个包含相同 TVML 模板的字符串，并使用 ${variable}注入(inject)值(value)。
然后，使用 DOMParser 对象将此字符串转换为 XML DOM 元素。
最后，借助 presentModal 方法(主对象 navigationDocument)呈现文档

您的函数将如下所示:

function catalogTemplate(title, firstMovie, secMovie) {
  var xmlStr = `<?xml version="1.0" encoding="UTF-8" ?>

   <document>
   <catalogTemplate>
  <banner>
   <title>${title}</title>
 </banner>
  <list>
 <section>
  <listItemLockup>
  <title>All Movies</title>
 <decorationLabel>2</decorationLabel>
 <relatedContent>
  <grid>
  <section>
 <lockup>
  <img src="http://a.dilcdn.com/bl/wp-content/uploads/sites/2/2014/03/Maleficent-Poster.jpg" width="250" height="376" />
  <title>${firstMovie}</title>
  </lockup>
  <lockup>
  <img src="http://www.freedesign4.me/wp-content/gallery/posters/free-movie-film-poster-the_dark_knight_movie_poster.jpg" width="250" height="376" />
  <title>${secMovie}</title>
  </lockup>
  </section>
  </grid>
  </relatedContent>
  </listItemLockup>

  </section>
 </list>
  </catalogTemplate>
 </document>`

  var parser = new DOMParser();
  var catalogDOMElem = parser.parseFromString(xmlStr, "application/xml");
  navigationDocument.presentModal(catalogDOMElem );
}

PS:我以目录模板为例。您可以使用任何 template

在 onLaunch 函数中，您可以通过传递任何变量来调用 catalogTemplate 函数。

App.onLaunch = function(options) {    
catalogTemplate("title", "Maleficent.", "The Dark knight");
}

您可以使用 addEventListener 添加监听器并传递函数以移动到另一个页面或触发操作

function catalogTemplate(title, firstMovie, secMovie, cb) {
  var xmlStr = `<?xml version="1.0" encoding="UTF-8" ?>
 <document>
   <catalogTemplate>
  <banner>
   <title>${title}</title>
 </banner>
  <list>
 <section>
  <listItemLockup>
  <title>All Movies</title>
 <decorationLabel>2</decorationLabel>
 <relatedContent>
  <grid>
  <section>
 <lockup>
  <img src="http://a.dilcdn.com/bl/wp-content/uploads/sites/2/2014/03/Maleficent-Poster.jpg" width="250" height="376" />
  <title>${firstMovie}</title>
  </lockup>
  <lockup>
  <img src="http://www.freedesign4.me/wp-content/gallery/posters/free-movie-film-poster-the_dark_knight_movie_poster.jpg" width="250" height="376" />
  <title>${secMovie}</title>
  </lockup>
  </section>
  </grid>
  </relatedContent>
  </listItemLockup>

  </section>
 </list>
  </catalogTemplate>
 </document>

`
  var parser = new DOMParser();
  var catalogDOMElem = parser.parseFromString(xmlStr, "application/xml”);

 catalogDOMElem.addEventListener("select", cb, false);

  navigationDocument.presentModal(catalogDOMElem );
}

让我们创建另一个模板只是为了展示我们如何通过选择特定项目来跳转到另一个页面。

function ratingTemplate(title) {
  var xmlStr = `<?xml version="1.0" encoding="UTF-8" ?>
  <document>
    <ratingTemplate>  
<title>${title}</title>
<ratingBadge value="0.8"></ratingBadge>
</ratingTemplate>
  </document>`
  var parser = new DOMParser();
  var ratingDOMElem = parser.parseFromString(xmlStr,"application/xml");
  navigationDocument.presentModal(ratingDOMElement);
}

在我们的 onLaunch 函数中。

App.onLaunch = function(options) {    

catalogTemplate("title", "Maleficent.", "The Dark knight", function() {
        navigationDocument.dismissModal();

        ratingTemplate(“rating template title")

    });
}

查看此列表了解更多 tutorials .