Pebble.js 未从 JSON 源加载菜单数据答案

【问题标题】：Pebble.js not loading menu data from JSON sourcePebble.js 未从 JSON 源加载菜单数据
【发布时间】：2015-02-27 15:15:59
【问题描述】：

我目前正在搞乱 pebble.js (sdk 2.0)，我正在尝试制作一个基于菜单的应用程序，它可以从 JSON 源加载数据。

我可以让一切正常，除了填充菜单部分。这是我的代码：

    var UI = require('ui');
var ajax = require('ajax');
var dataJSON = [];

var fruits = [
  {
    title: "Apple",
    subtitle: "Green and crispy!"
  },
  {
    title: "Orange",
    subtitle: "Peel first!"
  },
  {
    title: "Melon",
    subtitle: "Only three left!"
  }
];

var parseFeed = function(data, quantity) {
  var items = [];
  for(var i = 0; i < quantity; i++) {
    var teamOne = data.matches[i].team1.team_tag;
    var teamTwo = data.matches[i].team2.team_tag;
    var startTime = data.matches[i].starttime;
    var title = (teamOne + ' vs ' + teamTwo);
    var time =  (startTime.substring(11) + " CET" );
    items.push({
      title:title,
      subtitle:time
    });
  }
  return items;
};

var matchMenu = new UI.Menu({
  sections: [{
    title: 'D2MT',
    items: dataJSON
  }]
});



ajax({
    url:'http://dailydota2.com/match-api',
    type:'json'
  },
  function(data) {
    dataJSON = parseFeed(data, data.matches.length);

    for(var i = 0; i < fruits.length; i++) {
      console.log('title = ' + fruits[i].title);
      console.log('subtitle = ' + fruits[i].subtitle);
    }
    for(var j = 0; j < dataJSON.length; j++) {
      console.log('title = ' + dataJSON[j].title);
      console.log('subtitle = ' + dataJSON[j].subtitle);
    }
    console.log('SHOW MENU');
    matchMenu.show();
  },
  function(error) {
    console.log('Download failed: ' + error);
  }
);

哪个输出：

[PHONE] pebble-app.js:?: title = Apple
[PHONE] pebble-app.js:?: subtitle = Green and crispy!
[PHONE] pebble-app.js:?: title = Orange
[PHONE] pebble-app.js:?: subtitle = Peel first!
[PHONE] pebble-app.js:?: title = Melon
[PHONE] pebble-app.js:?: subtitle = Only three left!
[PHONE] pebble-app.js:?: title = Rave vs 5eva
[PHONE] pebble-app.js:?: subtitle = 14:00:00 CET
[PHONE] pebble-app.js:?: title = Arcanys vs XctN
[PHONE] pebble-app.js:?: subtitle = 14:30:00 CET
[PHONE] pebble-app.js:?: title = VP vs Meepwn'd
[PHONE] pebble-app.js:?: subtitle = 17:00:00 CET
[PHONE] pebble-app.js:?: title = Vega vs NiP
[PHONE] pebble-app.js:?: subtitle = 17:00:00 CET
[PHONE] pebble-app.js:?: title = Secret vs Empire
[PHONE] pebble-app.js:?: subtitle = 20:00:00 CET
[PHONE] pebble-app.js:?: title = SumsRift vs HR
[PHONE] pebble-app.js:?: subtitle = 20:00:00 CET
[PHONE] pebble-app.js:?: title = NiP vs Vega
[PHONE] pebble-app.js:?: subtitle = 20:30:00 CET
[PHONE] pebble-app.js:?: title = Fire vs Thu
[PHONE] pebble-app.js:?: subtitle = 23:00:00 CET
[PHONE] pebble-app.js:?: title = Signature vs G Guard
[PHONE] pebble-app.js:?: subtitle = 08:00:00 CET
[PHONE] pebble-app.js:?: title = Aces vs MVP
[PHONE] pebble-app.js:?: subtitle = 11:00:00 CET
[PHONE] pebble-app.js:?: SHOW MENU
[PHONE] pebble-app.js:?: (+) [menu 1] : [menu 1]

菜单加载“水果”很好，但是当我加载“dataJSON”时它什么也没做，其他人都知道为什么它不会将数据加载到菜单中

【问题讨论】：

标签： pebble-watch pebble-sdk cloudpebble pebble-js

【解决方案1】：

我没有意识到：var matchMenu = new UI.Menu，当时在那里创建了菜单，所以当 dataJSON 已满时，菜单已经创建，通过在 dataJSON 已满时创建菜单来修复。

【讨论】：

【解决方案2】：

就像您在自己的回答中提到的那样，您在第一次拨打var matchMenu = new UI.Menu 时就拨打了menu。解决这个问题的方法是两种方法之一。

您可以按照您提到的方式进行操作，并在检索数据后创建 menu，但您会限制何时以及如何调用 menu。您可能在一个函数中创建了 menu，这使得再次加载它需要大量开销。

您确实应该按照您开始的方式进行操作，但在显示之前将dataJSON 添加到menu。这将允许您灵活地拥有一个全局可寻址menu，您可以在您的应用程序中继续进行更新，而不是每次都要求再次调用服务器加载的信息。

另外，在我建议的方法中，您可以放入一个基本菜单，如果显示我们在加载信息时遇到问题，可以让用户知道。

【讨论】：