10

TVJS/TVML を使用して Apple TV アプリでテンプレートを動的に生成する方法を知っている人はいますか? 基本的に、API をヒットし、オブジェクトの配列を取得してから、そのデータを XML テンプレートに挿入したいと考えています。

私はそれを達成する方法についての情報を探していましたが、不足しています。ハードコーディングされた画像やビデオなどを使用しているが、動的に生成されたものは何もない多くのチュートリアルを見つけました。

どんな助けでも大歓迎です。

4

4 に答える 4

6

最後に、私はこれを理解しました。オンザフライでテンプレートを生成することは難しくありませんが、その代わりに、Presenter と ResourceLoader を再利用し、テンプレートを *.xml.js ファイルとして保持したいと考えました。これが私がたどり着いた解決策です。

Ray Wenderlich のチュートリアルcatalogTemplateで説明されているように、最初のビューには を使用しました。ただし、カンファレンストークの代わりに、男性用と女性用の商品のカテゴリを表示していました. カテゴリを選択したら、そのカテゴリの多数のオプションを表示したいと考えました。問題は、情報 (最も単純なケースではカテゴリのタイトル) を 2 番目のテンプレートに渡す方法でした。stackTemplate

最初のテンプレートでは、ロックアップを次のように構成しました。

<lockup categoryTitle="Women: Dresses" categoryDir="w-dresses">
  <img src="${this.BASEURL}images/dresses.jpg" width="230" height="288" />
  <title>Dresses</title>
</lockup>

ではapplication.js、チュートリアルと同じ方法でリスナーをアタッチしました。

doc.addEventListener("select", Presenter.load.bind(Presenter));

2 番目のテンプレート (Category.xml.js) は次のとおりです。

var Template = function(categoryTitle) { 
    return `<?xml version="1.0" encoding="UTF-8" ?>
    <document>
      <stackTemplate>
        <banner>
          <title>${categoryTitle}</title>
        </banner>
      </stackTemplate>
    </document>`
}

これは JavaScript であるため、この場合、値の配列などを関数に渡し、それに応じてテンプレートを作成できます。トリッキーな部分は、値を渡すことでした。

最初に、ResourceLoader にいくつかの変更を加えました (もちろん、これは概念の証明にすぎません)。categoryTitleトップレベルの関数に追加のパラメーターとして追加しただけで、次の呼び出し時にTemplate:

ResourceLoader.prototype.loadResource = function(resource, callback, categoryTitle) {
  var self = this;
  evaluateScripts([resource], function(success) {
    if(success) {
      var resource = Template.call(self, categoryTitle);
      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にload渡しcategoryTitleますresourceLoader:

load: function(event) {
  var self = this,
  ele = event.target,
  categoryTitle = ele.getAttribute("categoryTitle");
  if (categoryTitle) {
    resourceLoader.loadResource(`${baseURL}templates/Category.xml.js`, function(resource) {
        var doc = self.makeDocument(resource);
        self.pushDocument(doc);
    }, categoryTitle);
  }
},

これは私にとってはうまくいきます。

最後に 1 つ: 一部のカテゴリでは、 のようにアンパサンドを含むタイトルがありました'Tops & T-shirts'。当然、アンパサンドを XML エンティティに置き換えました: 'Tops &amp; T-shirts'. ただし、これは機能しませんでした。おそらく、この文字列が 2 回デコードされたためです。最初にエンティティがアンパサンドに変換され、2 回目のパスで単一のアンパサンドがエラーとしてフラグ付けされました。私にとってうまくいったのはこれでした：'Tops &amp;amp; T-shirts'！

于 2015-10-09T17:06:45.147 に答える
4

atvjsを使用している場合は簡単です。

// create your dynamic page
ATV.Page.create({
    name: 'homepage',
    url: 'path/to/your/json/data',
    template: function(data) {
        // your dynamic template
        return `<document>
                    <alertTemplate>
                        <title>${data.title}</title>
                        <description>${data.description}</description>
                    </alertTemplate>
                </document>`;
    }
});

// later in your app you can navigate to your page by calling
ATV.Navigation.navigate('homepage');

免責事項: 私はatvjsの作成者および保守担当者であり、この回答を書いている時点で、TVML および TVJS を使用した Apple TV 開発に使用できる唯一の JavaScript フレームワークです。したがって、このフレームワークからのみ参照を提供できました。その答えを偏った意見と誤解してはいけません。

于 2016-01-26T06:44:05.510 に答える
3

PHP を使用して TVML ファイルを動的に生成し、出力を text/javascript 形式として構成しています。

<?php
header("Content-type: application/x-javascript");

[run your PHP API calls here]

$template = '<?xml version="1.0" encoding="UTF-8" ?>
    <document>
    ... [use PHP variables here] ...
    </document>';

echo "var Template = function() { return `". $template . "`}";
?>
于 2015-09-28T00:21:56.407 に答える
1

テンプレート内の xml を表す動的文字列を作成することにより、テンプレートを動的に生成できますTVML。

ここでコードを確認してください: https://developer.apple.com/library/prerelease/tvos/samplecode/TVMLCatalog/Listings/client_js_Presenter_js.html#//apple_ref/doc/uid/TP40016505-client_js_Presenter_js-DontLinkElementID_6

XMLこのファイルには、ビューを表すことができるドキュメントを作成するために使用できる関数が含まれています。

XMLHttpRequest(例: TVJS-tvOS を介して API JSON 呼び出しを消費する) いくつかの JSON データを戻し、TVML テンプレートの 1 つに準拠する XML ドキュメントを動的に生成することができます。それを XML ドキュメントに解析してから、ドキュメントに移動します。

于 2015-09-28T00:06:35.207 に答える