我做错了什么，但我不太确定是什么。我正在尝试创建一个加载 TVML 模板的应用程序。从那里，您可以导航到包含有关所选项目的信息的新视图（也是模板）。最后，在这个视图中，您可以选择播放视频。它一直有效，直到我播放视图，因为它加载但第二个屏幕在顶部。我必须使用菜单按钮“返回”才能观看视频......这是我的代码（菜单和按钮的简化）：
应用程序.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" width="1740" height="500" />
<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" width="332" height="500" />
<title class="scrollTextOnHighlight">My Title</title>
</lockup>
</section>
</shelf>
</collectionList>
</stackTemplate>
</document>`
}
单击图像时，我使用模板参数加载我的下一个模板。这个模板是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" width="332" height="500" />
<title class="showAndScrollTextOnHighlight">Title 2</title>
</lockup>
</section>
</shelf>
</productTemplate>
</document>`
}
这是使用视频参数。在第一个“屏幕”上一切正常，无论我尝试加载模板还是视频。但是，相同的代码似乎在第二个屏幕上不起作用。有人可以帮我解决这个问题吗？我对Javascript不太了解。
我看过一些帖子，人们说您必须像这样将页面推送到堆栈中：
var parser = new DOMParser();
var newPageDocument = parser.parseFromString(NEW_PAGE_XML, 'application/xml');
navigationDocument.pushDocument(newPageDocument);
如果这是解决方案，如果有人能解释我该代码需要在哪里，我将不胜感激。或者如果我想要多个屏幕，我该如何正确实现它。非常感谢大家！