TVML/TVJS中的动态XML模板

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

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

如有任何帮助，我们将不胜感激。

最后，我明白了这一点。动态生成模板并不困难，但我希望重用Presenter和ResourceLoader，并将模板作为*.xml.js文件。这是我设法找到的解决方案。

对于初始视图，我使用了catalogTemplate，如Ray Wenderlich的教程中所示。然而，我展示的不是会议演讲，而是男士和女士商品的分类。一旦选择了一个类别，我想显示一个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));

下面是第二个模板(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}'. nn 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);
  }
},

这对我有用。

最后一点：对于某些类别，我的标题带有"与"符号，比如'Tops & T-shirts'。很自然，我用一个XML实体'Tops & T-shirts'替换了"与"符号。然而，这并没有起作用，可能是因为这个字符串被解码了两次：第一次实体被转换为"与"符号，第二次单个"与"被标记为错误。对我有效的是：'Tops &amp; T-shirts'！

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

我使用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 . "`}";
?>

您可以通过在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(例如：通过TVJS-tvOS使用API JSon调用(返回一些JSon数据，然后动态生成符合其中一个TVML模板的XML文档。将其解析为XML文档，然后导航到该文档。

相关内容

最新更新

热门标签：