TVML/TVJS 中的动态 XML 模板

Posted 2023-02-26

【中文标题】TVML/TVJS 中的动态 XML 模板

【英文标题】：Dynamic XML Template in TVML/TVJS

【发布时间】：2015-09-27 16:03:57

【问题描述】：

有谁知道如何使用 TVJS/TVML 在 Apple tv 应用程序中动态生成模板？基本上我想访问我的 API，取回一组对象，然后将该数据插入到我的 XML 模板中。

我一直在寻找有关如何完成它的信息，但没有找到。我发现许多教程使用硬编码的图像、视频等，但没有动态生成。

任何帮助将不胜感激。

【参考方案1】：

最后，我想通了。即时生成模板并不难，但我想重用 Presenter 和 ResourceLoader，并将模板作为 *.xml.js 文件。这是我设法得出的解决方案。

对于初始视图，我使用了catalogTemplate，如Ray Wenderlich's tutorial 中所示。然而，我没有在会议上发表演讲，而是展示了男士和女士商品的类别。一旦选择了一个类别，我想显示一个stackTemplate，其中包含该类别的许多选项。问题是如何将任何信息（最简单情况下的类别标题）传递给第二个模板。

在第一个模板中，我将锁定配置如下：

<lockup categoryTitle="Women: Dresses" categoryDir="w-dresses">
  <img src="$this.BASEURLimages/dresses.jpg"   />
  <title>Dresses</title>
</lockup>

在application.js 中，我附加了一个监听器，与教程显示的方式相同：

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

这是第二个模板（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(`$baseURLtemplates/Category.xml.js`, function(resource) 
        var doc = self.makeDocument(resource);
        self.pushDocument(doc);
    , categoryTitle);
  
,

这对我有用。

最后一点：对于某些类别，我的标题带有 & 符号，例如 'Tops & T-shirts'。自然地，我用 XML 实体替换了 & 符号：'Tops & T-shirts'。然而，这并没有奏效，可能是因为这个字符串被解码了两次：第一次将实体转换为 & 符号，而在第二次通过时，单个 & 符号被标记为错误。对我有用的是：'Tops & T-shirts'!

【讨论】：

这适用于简单的字符串值，我们如何传递复杂的 JSON 数据？

@VenkatapathiRajuM 在加载函数中，您只需创建一个对象并通过它。我还建议重新排序 loadResource 的参数，以便回调是最后一个。

如果我传入一个 JSON 数据数组并且需要使用 AngularJS 术语，ng-repeat 模板生成 的 array.length 并用 JSON 数据填充变量怎么办？像一个 Angular html 模板？基本思想是不对模板进行硬核化，而是根据返回的 JSON 数据生成它。谢谢！

我今天也遇到了类似的情况，因为我不知道 swift/objective c，我只是得出结论，我实际上可能更好地学习 swift。所有这些 tvml 混乱正在扼杀使用 tvml 的全部意义。

【参考方案2】：

如果你使用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 框架。因此我只能从这个框架中提供参考。答案不应被误认为是有偏见的意见。

【参考方案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 . "`";
?>

【讨论】：

在让 php 为我工作时遇到一些问题。我在产品包模板中使用 php，我的 php 看起来像这样：code <?php header("Content-type: application/x-javascript"); for ($x = 0; $x <= 10; $x++) echo "<text>Hello World!</text>"; ?>

【参考方案4】：

您可以通过在TVML 模板中创建表示xml 的动态字符串来动态生成模板。

在这里查看代码：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（例如：consuming API JSon calls through TVJS-tvOS）带回一些 JSON 数据，然后动态生成符合 TVML 模板之一的 XML 文档。将其解析为 XML 文档，然后导航到该文档。

【讨论】：

apple.com 链接不再有效。