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

后期，但可能值得。

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

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

解决方案：

如果您想使用动态对象以及远程网址提取，请使用data功能。请参见示例https://github.com/emadalam/atvjs#fetching-data-from-a-remote-source
将您的数据作为第二个参数传递给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);
  }
});

无法使用ATVJS从TVML应用中的JSON加载数据

1 个答案: