TVML - 浏览模板
Posted
技术标签:
【中文标题】TVML - 浏览模板【英文标题】：TVML - Navigate through templates 【发布时间】：2015-09-21 19:02:17 【问题描述】：我做错了什么，但我不太确定是什么。 我正在尝试创建一个加载 TVML 模板的应用程序。从那里，您可以导航到包含有关所选项目的信息的新视图（也是模板）。最后，在这个视图中，您可以选择播放视频。 它一直有效，直到我播放视图，因为它加载但第二个屏幕在顶部。我必须用菜单按钮“返回”才能看到视频...... 这是我的代码（简化的菜单和按钮）：
application.js
var resourceLoader;
App.onLaunch = function(options)
var javascriptFiles = [
`$options.BASEURL/js/ResourceLoader.js`,
`$options.BASEURL/js/Presenter.js`
];
evaluateScripts(javascriptFiles, function(success)
if(success)
resourceLoader = new ResourceLoader(options.BASEURL);
resourceLoader.loadResource(`$options.BASEURL/templates/Stack.xml.js`, function(resource)
var doc = Presenter.makeDocument(resource);
doc.addEventListener("select", Presenter.load.bind(Presenter));
Presenter.pushDocument(doc);
);
else
var errorDoc = createAlert("Evaluate Scripts Error", "Error attempting to evaluate external JavaScript files.");
navigationDocument.presentModal(errorDoc);
);
Presenter.js
function getDocument(url)
var templateXHR = new XMLHttpRequest();
templateXHR.responseType = "document";
templateXHR.addEventListener("load", function()
pushDoc(templateXHR.responseXML);, false);
templateXHR.open("GET", url, true);
templateXHR.send();
return templateXHR;
function pushDoc(document)
navigationDocument.pushDocument(document);
var Presenter =
makeDocument: function(resource)
if (!Presenter.parser)
Presenter.parser = new DOMParser();
var doc = Presenter.parser.parseFromString(resource, "application/xml");
return doc;
,
modalDialogPresenter: function(xml)
navigationDocument.presentModal(xml);
,
pushDocument: function(xml)
navigationDocument.pushDocument(xml);
,
load: function(event)
console.log(event);
var self = this,
ele = event.target,
videoURL = ele.getAttribute("video"),
templateURL = ele.getAttribute("template"),
presentation = ele.getAttribute("presentation");
if(videoURL)
var player = new Player();
var playlist = new Playlist();
var mediaItem = new MediaItem("video", videoURL);
player.playlist = playlist;
player.playlist.push(mediaItem);
player.present();
if(templateURL)
self.showLoadingIndicator(presentation);
resourceLoader.loadResource(templateURL,
function(resource)
if (resource)
var doc = self.makeDocument(resource);
doc.addEventListener("select", self.load.bind(self));
//doc.addEventListener("highlight", self.load.bind(self));
if (self[presentation] instanceof Function)
self[presentation].call(self, doc, ele);
else
self.defaultPresenter.call(self, doc);
);
,
showLoadingIndicator: function(presentation)
if (!this.loadingIndicator)
this.loadingIndicator = this.makeDocument(this.loadingTemplate);
if (!this.loadingIndicatorVisible && presentation != "modalDialogPresenter" && presentation != "menuBarItemPresenter")
navigationDocument.pushDocument(this.loadingIndicator);
this.loadingIndicatorVisible = true;
,
removeLoadingIndicator: function()
if (this.loadingIndicatorVisible)
navigationDocument.removeDocument(this.loadingIndicator);
this.loadingIndicatorVisible = false;
,
defaultPresenter: function(xml)
if(this.loadingIndicatorVisible)
navigationDocument.replaceDocument(xml, this.loadingIndicator);
this.loadingIndicatorVisible = false;
else
navigationDocument.pushDocument(xml);
,
loadingTemplate: `<?xml version="1.0" encoding="UTF-8" ?>
<document>
<loadingTemplate>
<activityIndicator>
<text>Loading...</text>
</activityIndicator>
</loadingTemplate>
</document>`
我也使用 ResourceLoader.js 文件，但我认为它并不重要，因为它是文档中显示的文件。
当应用程序启动时，我会加载我的第一个“模板”视图。 Stack.xml.js
var Template = function() return `<?xml version="1.0" encoding="UTF-8" ?>
<document>
<stackTemplate>
<collectionList>
<carousel>
<section>
<lockup>
<img src="$this.BASEURL/images/main_carousel/main_carousel001.png" />
<overlay>
<title>Title</title>
<subtitle>1902</subtitle>
</overlay>
</lockup>
</section>
</carousel>
<shelf>
<header>
<title>Last Added</title>
</header>
<section>
<lockup template="$this.BASEURL/templates/Product-001.xml.js" presentation="modalDialogPresenter">
<img src="$this.BASEURL/images/movies/movie001.png" />
<title class="scrollTextOnHighlight">My Title</title>
</lockup>
</section>
</shelf>
</collectionList>
</stackTemplate>
</document>`
当点击图片时，我使用 template 参数加载我的下一个模板。这个模板是Product-001.xml.js
var Template = function() return `<?xml version="1.0" encoding="UTF-8" ?>
<document>
<productTemplate theme="light">
<shelf>
<header>
<title>Last Added</title>
</header>
<section>
<lockup video="http://trailers.apple.com/movies/focus_features/9/9-clip_480p.mov">
<img src="$this.BASEURL/resources/images/movies/movie_520_e2.lcr" />
<title class="showAndScrollTextOnHighlight">Title 2</title>
</lockup>
</section>
</shelf>
</productTemplate>
</document>`
这是使用 video 参数。在第一个“屏幕”上一切正常，无论我尝试加载模板还是视频。但是，相同的代码似乎在第二个屏幕上不起作用。 有人可以帮我解决这个问题吗？ 我对 Javascript 了解不多。
我看过一些帖子，人们说你必须像这样将页面推送到堆栈上：
var parser = new DOMParser();
var newPageDocument = parser.parseFromString(NEW_PAGE_XML, 'application/xml');
navigationDocument.pushDocument(newPageDocument);
如果这是解决方案，如果有人能解释我该代码需要放在哪里，我将不胜感激。或者如果我想要多个屏幕，我该如何正确实现它。 非常感谢大家！
【问题讨论】：
【参考方案1】：发生这种情况很可能是因为您正在使用 presentation="modalDialogPresenter" 加载 Product-001.xml.js 文件。 您的视频可能会停留在模态框后面，请尝试按 Escape 时查看是否可以看到。 然后删除该部分并再次测试。 “modalDialogPresenter”适用于警报。
【讨论】：
【参考方案2】：嘿，你终于得到了这个问题的答案。我有一个类似的问题，我的视频在后台播放。我可以听到音频，但它被当前模板“覆盖”。我解决这个问题的方式有点像黑客，但我只是简单地取消了播放视频的函数中的当前视图。我的演示者类中有一个播放视频的函数。我在你的代码中没有看到这个。我想这就是你所指的。让我知道这是否有帮助。
【讨论】：
【参考方案3】：我最终在 Presenter 文件中执行此操作。 它似乎工作正常：
if(templateURL)
self.showLoadingIndicator(presentation);
resourceLoader.loadResource(templateURL,
function(resource)
if (resource)
var doc = self.makeDocument(resource);
doc.addEventListener("select", self.load.bind(self));
//doc.addEventListener("highlight", self.load.bind(self));
if (self[presentation] instanceof Function)
// self[presentation].call(self, doc, ele);
self.defaultPresenter.call(self, doc);
/* else self.defaultPresenter.call(self, doc);
*/
);
希望对你有帮助！
【讨论】：
以上是关于TVML - 浏览模板的主要内容，如果未能解决你的问题，请参考以下文章