数据未从 JSON 加载TvOS、TVML、Mustache

编程问答 2022-05-30

问题描述

我正在开发一个带有 TVML 的 Apple TV 应用，它使用 Mustache.js 来填充 UI 元素。

出于某种原因，我的布局没有由 JSON 文件中的数据填充，知道出了什么问题吗？它读取文件是的，因为标题和副标题是可见的，项目的数量也是如此。但是图像和数据没有注入。

小轮播主屏幕已构建，但缺少实际内容。

enter image description here

   App.onLaunch = function(options) {
  evaluateScripts(options.initialJSDependencies,function(success){
      if (success) {
        // 2:
        resourceLoader = new ResourceLoaderJS(NativeResourceLoader.create());
        var initialDoc = loadInitialDocument(resourceLoader);
        initialDoc.addEventListener("select",_handleEvent);
        navigationDocument.pushDocument(initialDoc);```
        
      } else {
        // 3:
        var alert = _createalert("Evaluate Scripts Error","Error attempting to evaluate the external JS files.");
        navigationDocument.presentModal(alert);

        throw ("Playback Example: unable to evaluate scripts.");
      }
    });
};

问题就在这里：

    function loadInitialDocument(resourceLoader) {
  var data = resourceLoader.getJSON("homeScreen.json");
  data["images"] = resourceLoader
    .convertNamesToURLs(data["images"]);
  data = resourceLoader
    .recursivelyConvertFieldsToURLs(data,"image");
  data["sharedImages"] = _sharedImageResources(resourceLoader);
  return resourceLoader.getDocument("homeScreen.tvml",data);
}

这是 homeScreen.json

    {
  
  "featured": [
    {
      "template": "video.tvml","data": "trains1.json","image": "TrainsN.lsr","title": "muumuu","subtitle": "jeejee"
    },{
      "template": "video.tvml","data": "diggers1.json","image": "digs_feat.lsr","title": "juujuu","subtitle": "miumau"
    },"data": "ftrucks1.json","image": "ftrucks_feat.lsr","title": "","subtitle": ""
    },"subtitle": ""
    }
  ]
}

这是布局（homeScreen.tvml）：

<?xml version="1.0" encoding="UTF-8"?>
<document>
  <head>  
    <style>
      .imageWithGradient {
        tv-tint-color: linear-gradient(top,0.33,transparent,0.66,rgba(0,64,0.7),1.0));
      }
      .showtextOnHighlight {
        tv-text-highlight-style: show-on-highlight;
      }
    </style>
  </head>
  <stackTemplate>
    <collectionList>
      <shelf>
        <section>
          {{#featured}}
          
            <lockup template="{{template}}" data="{{data}}" presentation="push">
              <img src="{{images}}" width="1400" height="800" />
              <overlay>
                <title>{{title}}</title>
                <subtitle>{{subtitle}}</subtitle>
              </overlay>
            </lockup>
          {{/featured}}
        </section>  
      </shelf>
    </collectionList>  
  </stackTemplate>
</document>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

jsonmustachetvmltvostvos