Question

我目前正在使用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]

菜单加载'Fruits'很好，但是当我加载'dataJSON'时它没有做任何事情，其他任何人都知道为什么它不会将数据加载到菜单中

Answer 1

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

Answer 2

就像您在自己的回答中提到的那样，您在第一次调用menu时正确var matchMenu = new UI.Menu。解决这个问题的方法有两种。

您可以按照提及的方式执行此操作并在检索数据后生成menu，但之后您将限制何时以及如何调用menu。您可能在函数内创建了menu，这使得它再次加载它需要很多开销。

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

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

Pebble.js没有从JSON源加载菜单数据

2 个答案: