javascript - 使用 Parse.com 使用 Javascript 值填充 HTML 表格

Question

我希望创建一个简单的 HTML 网站，并将来 self 的 iOS 应用程序的数据显示在表格中。我将 Parse.com 用于我的移动数据，我将使用 Javascript 在网站上显示它。

我之前开发过一个基于JSP的网站，但是这次我使用的是Wordpress的Javascript插件，所以我不能使用JSP文件。因此，我需要处理 HTML 代码中的所有内容。

有没有办法将以下 Parse.com 查询放入 HTML 表中？

var GameScore = Parse.Object.extend("GameScore");
var query = new Parse.Query(GameScore);
query.equalTo("playerName", "Dan Stemkoski");
query.find({
  success: function(results) {
    alert("Successfully retrieved " + results.length + " scores.");
    // Do something with the returned Parse.Object values
    for (var i = 0; i < results.length; i++) { 
      var object = results[i];
      alert(object.id + ' - ' + object.get('playerName'));
    }
  },
  error: function(error) {
    alert("Error: " + error.code + " " + error.message);
  }
});

Answer 1

为要显示此数据的页面创建自定义页面模板。例如在 Wordpress Admin 中创建一个名为“score-table”的页面，然后在您的主题中创建一个名为“page-score-table.php”的页面模板。

如果需要，请在页面和 jQuery 中包含解析库脚本(尽管这应该由 Wordpress 加载)，然后使用类似的东西。

<table id="results-table">
<tr>
  <th>User Name</th>
  <th>Score</th>
</tr>
</table>

...

<script>
Parse.initialize("Your", "Credentials");

var GameScore = Parse.Object.extend("GameScore");
var query = new Parse.Query(GameScore);
query.equalTo("playerName", "Dan Stemkoski");
query.find({
    success: function(results) {
       for (var i = 0; i < results.length; i++) { 
           var object = results[i];
               (function($) {
                   $('#results-table').append('<tr><td>' + object.get('playerName') + '</td><td>' + object.get('score') + '</td></tr>');
               })(jQuery);
       }
    },
    error: function(error) {
        alert("Error: " + error.code + " " + error.message);
    }
});
</script>

Fiddle showing it HERE , 设置一个虚拟的解析表来展示给你看。

实际上用这个替换成功函数，我相信如果你有很多行，附加是相当昂贵的......

...
///before query.find();
var myScores='';
...
success: function(results) {
for (var i = 0; i < results.length; i++) { 
  var object = results[i];
  myScores+='<tr><td>' + object.get('playerName') + '</td><td>' + object.get('score') + '</td></tr>';
}
  (function($) {
      $('#results-table').append(myScores);
  })(jQuery);
}