TVML 菜单栏问题答案

【问题标题】：TVML MenuBar issueTVML 菜单栏问题
【发布时间】：2017-10-28 06:33:51
【问题描述】：

我正在使用 TVML 为 TVOS App 开发模板。该应用程序使用菜单栏。但是只有当用户单击 Home/Back 按钮时，此 MenuBar 才会打开。我只想通过向上滑动来实现它。就像它在 TVOS 的 Youtube 应用程序中一样。 index.xml 的代码（MenuBar 在哪里）：

<?xml version="1.0" encoding="UTF-8" ?>
<document>
  <menuBarTemplate>
    <menuBar>
      <menuItem documentURL="/templates/MyProject/Events.xml" autoHighlight="true">
        <title>Events</title>
      </menuItem>
      <menuItem documentURL="/templates/MyProject/News.xml">
        <title>News</title>
      </menuItem>
      <menuItem documentURL="/templates/MyProject/Programs.xml">
        <title>Programs and Courses</title>
      </menuItem>
        <menuItem documentURL="/templates/MyProject/Settings.xml">
        <title>Settings</title>
      </menuItem>
    </menuBar>
  </menuBarTemplate>
</document>

【问题讨论】：

标签： tvos apple-tv tvml

【解决方案1】：

您需要将功能添加到您的 application.js，例如（来自https://developer.apple.com/library/content/documentation/TVMLKitJS/Conceptual/TVMLProgrammingGuide/AddingaMenuBar.html）：

var baseURL;

function loadingTemplate() {
    var loadingDoc = "<document><loadingTemplate><activityIndicator>
    <text>Loading Page</text></activityIndicator></loadingTemplate>
    </document>";
var parser = new DOMParser();
var parsedTemplate = parser.parseFromString(loadingDoc, "application/xml");
return parsedTemplate;
}

function alertTemplate() {
    var alertDoc = "<document><alertTemplate><title>Error</title>
<description>Page failed to load</description></alertTemplate></document>";
    var parser = new DOMParser();
    var parsedTemplate = parser.parseFromString(alertDoc, 
    "application/xml");
    return parsedTemplate;
}

function loadAndPushDocument(url) {
    var loadingDocument = loadingTemplate();
    navigationDocument.pushDocument(loadingDocument);
    var request = new XMLHttpRequest();
    request.open("GET", url, true);

request.onreadystatechange = function() {
    if (request.readyState != 4) {
        return;
    }

    if (request.status == 200) {
        var document = request.responseXML;
        document.addEventListener("select", handleSelectEvent);
        navigationDocument.replaceDocument(document, loadingDocument)
    }
    else {
        navigationDocument.popDocument();
        var alertDocument = alertTemplate();
        navigationDocument.presentModal(alertDocument);
    }
};
request.send();
}

function updateMenuItem(menuItem, url) {
    var request = new XMLHttpRequest();
    request.open("GET", url, true);

request.onreadystatechange = function() {
    if (request.status == 200) {
        var document = request.responseXML;
        document.addEventListener("select", handleSelectEvent);
        var menuItemDocument = 
menuItem.parentNode.getFeature("MenuBarDocument");
        menuItemDocument.setDocument(document, menuItem)
    }
};

request.send();
}

function handleSelectEvent(event) {
    var selectedElement = event.target;

    var targetURL = selectedElement.getAttribute("selectTargetURL");
    if (!targetURL) {
    return;
    }
targetURL = baseURL + targetURL;

if (selectedElement.tagName == "menuItem") {
    updateMenuItem(selectedElement, targetURL);
}
else {
    loadAndPushDocument(targetURL);
    }
}

App.onLaunch = function(options) {
    baseURL = options.BASEURL;
    var startDocumentURL = baseURL + "templates/menuBar.xml";

    loadAndPushDocument(startDocumentURL)
}

【讨论】：