2
我正在做一些非常錯誤的事情，但我不太確定。 我想創建一個加載TVML模板的應用程序。從那裏，你可以導航到一個新的視圖（也是一個模板）與關於所選項目的信息。最後，在這個視圖中，你可以選擇播放視頻。 它的作品，直到我播放視圖，因爲它加載，但第二個屏幕在上面。我要「回去」的菜單按鈕，看視頻...... 這裏是我的代碼（簡化的菜單和按鈕的）：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);
}
});
}
演示。 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>`
}
當點擊圖像上，我使用模板參數加載我的下一個模板。這個模板是產品-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);
如果是這樣的解決方案，我將非常感激，如果在這情況下代碼有人可以解釋我需要。或者如果我想要多個屏幕，我該如何正確實施它。 非常感謝大家！