无法使用ATVJS在TVML应用程序中从JSON加载数据

Question

我正在使用ATVJS插件开发TVML应用程序。我已经成功地创建了一个使用硬编码模板和数据构建的静态页面。但是，如果我尝试将动态数据与 Mustache 一起使用，模板不起作用，并且出现空白屏幕。

这是我正在使用的代码：

ATV.Page.create({
    name: 'main',
    template(data, url) {
       var tmplt = `<document>
       <mainTemplate>
          <background>
             <img src="${data.image}" />
          </background>
          <menuBar>
             <section>
                <menuItem>
                   <title> {{ catalog }}</title>
                </menuItem>
                <menuItem>
                   <title>Option 2</title>
                </menuItem>
             </section>
          </menuBar>
       </mainTemplate>
       </document>`;
       return Mustache.render(tmplt, url);
       },
    data: {
        image: baseurl + 'images/main.jpg'
    },
    url : 'http://127.0.0.1:3000/data.json'
}); 

我正在使用的 JSON 文件非常简单，因为这只是一个测试：

{
  "catalog" : "Option 1"
}

如果我对菜单项的标题进行硬编码，一切正常

<title>Option 1</title>

但是一旦我尝试获取数据，就会出现空白屏幕

<title>{{ catalog }}</title>

Answer 1

迟到的帖子，但可能值得。

我可以看到上述结构有两个问题。

1. 使用原始data对象以及url配置来获取远程 json
2. 未将正确的对象传递给 Mustache.render 函数

溶液：

1. 如果要使用动态对象以及远程 url 获取，请使用传递data函数。请参阅示例 https://github.com/emadalam/atvjs#fetching-data-from-a-remote-source
2. 将数据作为第二个参数传递给 Mustache.render 函数。请参阅使用示例 https://github.com/janl/mustache.js#usage。

如下所示的内容应该可以正常工作。

var image = `${baseurl}images/main.jpg`;
ATV.Page.create({
  name: 'main',
  url : 'http://127.0.0.1:3000/data.json',
  template(data) {
    var tmplt = `<document>
      <mainTemplate>
        <background>
          <img src="${image}" />
        </background>
        <menuBar>
          <section>
            <menuItem>
              <title> {{ catalog }}</title>
            </menuItem>
            <menuItem>
              <title>Option 2</title>
            </menuItem>
          </section>
        </menuBar>
      </mainTemplate>
    </document>`;
    return Mustache.render(tmplt, data);
  }
});