2

私は何か非常に間違ったことをしていますが、何が何なのかよくわかりません。TVML テンプレートを読み込むアプリを作成しようとしています。そこから、選択したアイテムに関する情報を含む新しいビュー (テンプレートでもあります) に移動できます。最後に、このビューで、ビデオの再生を選択できます。ビューが読み込まれるため、ビューを再生するまで機能しますが、2番目の画面が一番上にあります。ビデオを見るには、メニューボタンで「戻る」必要があります...これが私のコードです（メニューとボタンを簡略化したもの）：

アプリケーション.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);
    }
  });
}

Presenter.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>`
}

画像をクリックすると、テンプレートパラメーターを使用して次のテンプレートを読み込みます。このテンプレートはProduct-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>`
}

これはvideoパラメータを使用しています。最初の「画面」では、テンプレートまたはビデオを読み込もうとしても、すべてが機能します。ただし、同じコードは 2 番目の画面では機能しないようです。誰かがこれで私を助けてくれますか? 私はJavascriptについてあまり知りません。

次のようにページをスタックにプッシュする必要があると人々が言う投稿を見たことがあります。

var parser = new DOMParser();
var newPageDocument = parser.parseFromString(NEW_PAGE_XML, 'application/xml');
navigationDocument.pushDocument(newPageDocument);

これが解決策である場合、そのコードがどこにある必要があるかを誰かが説明してくれれば、とても感謝しています。または、複数の画面が必要な場合、どうすれば正しく実装できますか。本当にありがとうございました！

4

3 に答える 3

0

これはおそらく、presentation="modalDialogPresenter" を使用して Product-001.xml.js ファイルをロードしているために発生します。ビデオがモーダルの後ろに残っている可能性があります。Esc キーを押したときにビデオが表示されるかどうかを確認してください。次に、その部分を取り外して、もう一度テストします。「modalDialogPresenter」はアラート用です。

于 2015-11-09T13:03:04.510 に答える
0

私はプレゼンターファイルでこれを行うことになりました。それはうまくいくようです：

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);
                        self.defaultPresenter.call(self, doc);
                    } 
                    /* else { self.defaultPresenter.call(self, doc); }
                    */
                }
            }
        );

それが役に立てば幸い！

于 2015-11-10T16:31:23.423 に答える