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

Question

我正在使用 Apple 的 TVMLCatalog 示例文件，但一直试图将对象传递到我在演示器中加载的模板文件（javascript 文件）。这看起来应该是一个完全基本的事情来完成，但它让我击败了。

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

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);
                    }
                }
            );

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

Answer 1

是的！您可以将变量注入 TVML 模板。

\n\n

首先，您必须创建一个包含相同 TVML 模板的字符串，并用于 ${variable}注入值。\n然后，使用 DOMParser 对象将此字符串转换为 XML DOM 元素。\n最后，在 PresentModal 方法（主对象）的帮助下呈现文档导航文档）

\n\n

你的函数将如下所示：

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

在我们的 onLaunch 函数中。

\n\n

App.onLaunch = function(options) {    \n\ncatalogTemplate("title", "Maleficent.", "The Dark knight", function() {\n        navigationDocument.dismissModal();\n\n        ratingTemplate(\xe2\x80\x9crating template title")\n\n    });\n}\n

\n\n

检查此列表以获取更多教程。

\n