TVML/TVJS中的动态XML模板

Question

有谁知道如何使用TVJS/TVML在Apple TV应用程序中动态生成模板？基本上我想点击我的API,获取一个对象数组,然后将这些数据插入到我的XML模板中.

我一直在寻找有关如何实现它的信息但是已经很短了.我发现许多教程使用硬编码图像,视频等,但没有动态生成.

任何帮助,将不胜感激.

Answer 1

最后,我已经想到了这一点.在运行中生成模板并不困难,但我想重用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}'. \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);
  }
},

这适合我.

最后一点说明:对于某些类别,我的标题是&符号,如'Tops & T-shirts'.当然,我用XML实体替换了&符号:'Tops & T-shirts'.然而,这不起作用,可能是因为该字符串被解码了两次:第一次将实体变为&符号,而在第二次传递时,单个&符号被标记为错误.对我有用的是:'Tops & T-shirts'!

Answer 2

您可以通过创建表示模板中 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 模板之一的 XML 文档。将其解析为 XML 文档，然后导航到该文档。