javascript - tvOS: ネストされたテンプレート

Question

カタログ テンプレートを使用してビデオ コンテンツを表示するシンプルなアプリがありますが、たとえば、メイン メニューから選択できる 6 つまたは 7 つのカタログ テンプレートをアプリに持たせ、それぞれに独自のビデオ セットを持たせたいと考えています。現在、最初に 1 つのテンプレートを読み込んで残りを tvOS に任せるのではなく、テンプレート間を移動する方法を理解するのに苦労しています。理想的には、カタログ テンプレートを子として持つトップ レベルの Showcase テンプレートが必要です。私はTVMLとJSを使用しており、これまでのところ次のコードがあります(主にチュートリアルから組み立てられています):

アプリケーション.js

var resourceLoader;

App.onLaunch = function(options) {
  // 2
  var javascriptFiles = [
    `${options.BASEURL}appletv/js/ResourceLoader.js`, 
    `${options.BASEURL}appletv/js/Presenter.js`
  ];

  evaluateScripts(javascriptFiles, function(success) {
    if(success) {
      // 3
      resourceLoader = new ResourceLoader(options.BASEURL);
      resourceLoader.loadResource(`${options.BASEURL}appletv/templates/CS50Template.xml.js`, function(resource) {
        var doc = Presenter.makeDocument(resource);
        doc.addEventListener("select", Presenter.load.bind(Presenter)); //add this line
        Presenter.pushDocument(doc);
      });
    } else {
      var errorDoc = createAlert("Evaluate Scripts Error", "Error attempting to evaluate external JavaScript files.");
      navigationDocument.presentModal(errorDoc);
    }
  });
}

// 2
var createAlert = function(title, description) {
  var alertString = `<?xml version="1.0" encoding="UTF-8" ?>
    <document>
      <alertTemplate>
        <title>${title}</title>
        <description>${description}</description>
        <button>
            <text>OK</text>
        </button>
      </alertTemplate>
    </document>`
    var parser = new DOMParser();
    var alertDoc = parser.parseFromString(alertString, "application/xml");
    return alertDoc
}

ResourceLoader.js

function ResourceLoader(baseurl) {
    this.BASEURL = baseurl;
}

ResourceLoader.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 = `Error loading resource '${resource}'. \n\n Try again later.`,
          alert = createAlert(title, description);
      navigationDocument.presentModal(alert);
    }
  }); 
}

Presenter.js

var Presenter = {
  // 1
  makeDocument: function(resource) {
    if (!Presenter.parser) {
      Presenter.parser = new DOMParser();
    }
    var doc = Presenter.parser.parseFromString(resource, "application/xml");
    return doc;
  },
  // 2
  modalDialogPresenter: function(xml) {
    navigationDocument.presentModal(xml);
  },

  // 3
  pushDocument: function(xml) {
    navigationDocument.pushDocument(xml);
  },

  load: function(event) {
  //1
    var self = this,
    ele = event.target,
    videoURL = ele.getAttribute("videoURL")
    if(videoURL) {
      //2
      var player = new Player();
      var playlist = new Playlist();
      var mediaItem = new MediaItem("video", videoURL);

      player.playlist = playlist;
      player.playlist.push(mediaItem);
      player.present();
    }
  },
}

テンプレート自体:

//This file outlines the catalogTemplate.
var Template = function() { return `<?xml version="1.0" encoding="UTF-8" ?>
  <document>
    <catalogTemplate> 
      <banner> 
        <title style="color: rgba(255, 255, 255)">This is CS50 2015.</title>
      </banner>
      <list> 
        <section> 
          <listItemLockup> 
            <title style="color: rgba(255, 255, 255)">Lectures</title>
            <decorationLabel>1</decorationLabel>
            <relatedContent> 
              <grid>
                <section> 
                  <lockup videoURL="${this.BASEURL}2015/fall/lectures/0/w/week0w-1080p.mp4">
                    <img src="${this.BASEURL}2015/fall/lectures/0/w/week0w.png" width="500" height="308" />
                    <title>Week 0</title>
                  </lockup>    
                </section>
              </grid>
            </relatedContent>
          </listItemLockup>
        </section>
        <section>
          <listItemLockup>
            <title style="color: rgba(255, 255, 255)">Sections</title>
            <decorationLabel>1</decorationLabel>
            <relatedContent>
              <grid>
                <section>
                  <lockup videoURL="${this.BASEURL}2015/fall/sections/1/less/less-1080p.mp4">
                    <img src="${this.BASEURL}2015/fall/sections/1/less/less.png" width="500" height="308" />
                    <title>Supersection</title>
                  </lockup>
                </section>
              </grid>
            </relatedContent>
          </listItemLockup>
        </section>
        <section>
          <listItemLockup>
            <title style="color: rgba(255, 255, 255)">Quizzes</title>
            <decorationLabel>1</decorationLabel>
            <relatedContent>
              <grid>
                <section>
                  <lockup videoURL="${this.BASEURL}2015/fall/quizzes/1/review1-1080p.mp4">
                    <img src="${this.BASEURL}2015/fall/quizzes/1/review1.png" width="500" height="308" />
                    <title>Review 1</title>
                  </lockup>
                </section>
              </grid>
            </relatedContent>
          </listItemLockup>
        </section>
        <section>
          <listItemLockup>
            <title style="color: rgba(255, 255, 255)">Walkthroughs</title>
            <decorationLabel>1</decorationLabel>
            <relatedContent>
              <grid>
                <section>
                  <lockup videoURL="${this.BASEURL}2013/fall/walkthroughs/lecture/argv-0/argv-0-1080p.mp4">
                    <img src="${this.BASEURL}2013/fall/walkthroughs/lecture/argv-0/argv-0.png" width="500" height="308" />
                    <title>argv-0</title>
                  </lockup>
                </section>
              </grid>
            </relatedContent>
          </listItemLockup>
        </section>
      </list>
    </catalogTemplate>
  </document>`
}