如何处理 tvOS MenuBarTemplate 选择？答案

【问题标题】：How to handle tvOS MenuBarTemplate selection?如何处理 tvOS MenuBarTemplate 选择？
【发布时间】：2015-09-21 18:23:39
【问题描述】：

我设置并显示了一个基本的 MenuBarTemplate。

我如何对用户的菜单选择做出反应并加载适当的内容模板？

【问题讨论】：

标签： tvos tvml tvjs

【解决方案1】：

在menuItem 标记中包含一个指向要加载的模板的template 属性和一个设置为menuBarItemPresenter 的presentation 属性。

<menuItem template="${this.BASEURL}templates/Explore.xml.js" 
  presentation="menuBarItemPresenter">
    <title>Explore</title>
</menuItem>

然后您可以使用菜单栏的MenuBarDocument 功能将文档与每个菜单栏项相关联。

menuBarItemPresenter: function(xml, ele) {
  var feature = ele.parentNode.getFeature("MenuBarDocument");
  if (feature) {
    var currentDoc = feature.getDocument(ele);
    if (!currentDoc) {
      feature.setDocument(xml, ele);
    }
  }

这假设您正在使用Presenter.js 文件，如Apple's "TVML Catalog" sample 中的文件。那里指定的load 函数调用了menuItem 的presentation 属性中指定的函数。

【讨论】：

我正在尝试处理一些逻辑，因为 XHR 为堆栈模板加载提要。有人知道如何在 MenuBar 中处理这个问题吗？我现在尝试的一切都不起作用。

【解决方案2】：

我认为 TVML 和 TVJS 与 HTML 和 Javascript 类似。当我们想在用户界面中添加一些交互时，我们应该 addEventListener 到 DOM。

在 Apple 的“TVML 目录”中，Presenter.js 是一个很好的例子，但它是抽象的，可以用于不同的 Present 动作。

当我开发我的应用程序时，我已经编写了这个用于处理菜单栏选择的演示。

模块：loadTemplate.js

var loadTemplate = function ( baseURL , templateData ){
  if( !baseURL ){
    throw("baseURL is required");
  }
  this.BASEURL = baseURL;
  this.tpData = templateData;
}

loadTemplate.prototype.loadResource = function ( resource , callback ){
  var self = this;
  evaluateScripts([resource], function(success) {
      if (success) {
          var resource = Template.call(self);
          callback.call(self, resource);
      } else {
          var title = "Resource Loader Error",
              description = `There was an error attempting to load the resource '${resource}'. \n\n Please try again later.`,
              alert = createAlert(title, description);
          Presenter.removeLoadingIndicator();
          navigationDocument.presentModal(alert);
      }
  });
}

module.exports = loadTemplate;

模块 nav.js（使用 menuBarTemplate）：

import loadTemplate from '../helpers/loadTemplates.js'

let nav = function ( baseURL ){

  var loader = new loadTemplate( 
      baseURL , 
      {
        "explore" : "EXPLORE", 
        "subscribe" : "SUBSCRIBE", 
        "profile" :  "PROFILE", 
        "settings" : "SETTINGS" 
      }//need to use i18n here 
  ); 

  loader.loadResource(`${baseURL}templates/main.xml.js`, function (resource){

    var parser = new DOMParser();
    var navDoc = parser.parseFromString(resource, "application/xml");

    navDoc.addEventListener("select" , function ( event ){
      console.log( event );

      var ele = event.target,
      templateURL = ele.getAttribute("template");

      if (templateURL) {
        loader.loadResource(templateURL,

          function(resource) {
            if (resource) {
              let newParser = new DOMParser();
              var doc = newParser.parseFromString( resource , "application/xml" );

              var menuBarItemPresenter = function ( xml , ele ){
                var feature = ele.parentNode.getFeature("MenuBarDocument");
                if( feature ){
                  var currentDoc = feature.getDocument( ele );
                  if( !currentDoc ){
                    feature.setDocument( xml , ele );
                  }
                }
              };

              menuBarItemPresenter( doc , ele );
            }
          }
        );
      }
    });

    navigationDocument.pushDocument(navDoc);

  });//load from teamplate.

}

module.exports = nav;

我的代码不是最佳实践，但正如您所见，您只需要 addEventListener 就像您正在编写 Web 应用程序一样。然后您可以轻松处理menuBarTemplate 选择，即使在 XHR 加载后也是如此。

避免过多的回调，你应该一次又一次地重建你的代码。 :-)

【讨论】：

你可以使用 Promise :-)