title: TVML - Navigate through templates
body: <p>I´m doing something very wrong, but I´m not very sure of what.
  I am trying to create an app which loads a TVML template. From there, you can navigate to a new view (also a template) with information about the selected item. Finally, in this view, you can choose to play the video.
  It works until I play the view because it loads but the second screen is on top. I have to "go back" with the menu button to see the video...
  Here is my code (simplified of menus and buttons):</p>
  
  <p><strong>application.js</strong></p>
  
  <pre><code>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);
      }
    });
  }
  </code></pre>
  
  <p><strong>Presenter.js</strong></p>
  
  <pre><code>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 &amp;&amp; presentation != "modalDialogPresenter" &amp;&amp; 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: `&lt;?xml version="1.0" encoding="UTF-8" ?&gt;
          &lt;document&gt;
            &lt;loadingTemplate&gt;
              &lt;activityIndicator&gt;
                &lt;text&gt;Loading...&lt;/text&gt;
              &lt;/activityIndicator&gt;
            &lt;/loadingTemplate&gt;
          &lt;/document&gt;`   
  }
  </code></pre>
  
  <p>I also use a ResourceLoader.js file but I think it is not important as it is the one shown in documentation.</p>
  
  <p>When the app launches, I therefore load my first "template" view.
  <strong>Stack.xml.js</strong></p>
  
  <pre><code>var Template = function() { return `&lt;?xml version="1.0" encoding="UTF-8" ?&gt;
  &lt;document&gt;
    &lt;stackTemplate&gt; 
      &lt;collectionList&gt;
        &lt;carousel&gt;
          &lt;section&gt;
            &lt;lockup&gt;
              &lt;img src="${this.BASEURL}/images/main_carousel/main_carousel001.png" width="1740" height="500" /&gt;
              &lt;overlay&gt;
                &lt;title&gt;Title&lt;/title&gt;
                &lt;subtitle&gt;1902&lt;/subtitle&gt;
              &lt;/overlay&gt;
            &lt;/lockup&gt;
           &lt;/section&gt;
        &lt;/carousel&gt;
  
        &lt;shelf&gt;
          &lt;header&gt;
            &lt;title&gt;Last Added&lt;/title&gt;
          &lt;/header&gt;
          &lt;section&gt;
            &lt;lockup template="${this.BASEURL}/templates/Product-001.xml.js" presentation="modalDialogPresenter"&gt;
              &lt;img src="${this.BASEURL}/images/movies/movie001.png" width="332" height="500" /&gt;
              &lt;title class="scrollTextOnHighlight"&gt;My Title&lt;/title&gt;
            &lt;/lockup&gt;
          &lt;/section&gt;
        &lt;/shelf&gt;
  
      &lt;/collectionList&gt;
    &lt;/stackTemplate&gt;
  &lt;/document&gt;`
  }
  </code></pre>
  
  <p>When click on the image, I load my next template using the <strong>template</strong> parameter. This template is <strong>Product-001.xml.js</strong></p>
  
  <pre><code>var Template = function() { return `&lt;?xml version="1.0" encoding="UTF-8" ?&gt;
  &lt;document&gt;
    &lt;productTemplate theme="light"&gt;
  
      &lt;shelf&gt;
          &lt;header&gt;
            &lt;title&gt;Last Added&lt;/title&gt;
          &lt;/header&gt;
          &lt;section&gt;
            &lt;lockup video="http://trailers.apple.com/movies/focus_features/9/9-clip_480p.mov"&gt;
              &lt;img src="${this.BASEURL}/resources/images/movies/movie_520_e2.lcr" width="332" height="500" /&gt;
              &lt;title class="showAndScrollTextOnHighlight"&gt;Title 2&lt;/title&gt;
            &lt;/lockup&gt;
  
          &lt;/section&gt;
       &lt;/shelf&gt;  
     &lt;/productTemplate&gt;
  &lt;/document&gt;`
  }
  </code></pre>
  
  <p>This is using the <strong>video</strong> parameter. On the first "screen" everything works, no matter if I try to load a Template or a video. However, the same code does´t seem to work on the second screen.
  Could someone help me with this?
  I don´t know much about Javascript.</p>
  
  <p>I have seen some posts where people say you must push the pages on the stack like this:</p>
  
  <pre><code>var parser = new DOMParser();
  var newPageDocument = parser.parseFromString(NEW_PAGE_XML, 'application/xml');
  navigationDocument.pushDocument(newPageDocument);
  </code></pre>
  
  <p>If this is the solution, I would be very grateful if someone could explain me where does that code need to be. Or how can I implement it correctly if I want multiple screens.
  Thank you all very much!</p>