Google Apps脚本中的异步加载和表脚本编辑器中的HTML模板

Question

我试图将数据异步加载到Google脚本编辑器中的HTML文件。

我当前的输出如下：

<ul id="cats">              
<?
var cat = BASIC_DATA.categories;
for(var i=2;i<cat.length;i++){
var categoryName = cat[i][0];
var categoryIcon = ICON[cat[i][0]];
var categoryNumb = cat[i][1];
?>
<li name="<?=categoryName?>" type="category"><span class="icon" style="background-position:<?=categoryIcon?>;"></span><span class="title"><?=categoryName?></span><?='('+categoryNumb+')'?></li>
<?
}
?>
</ul>

我要实现的是以下内容，但是使用Google建议的方法HTML服务：最佳实践

  $(function() {
  google.script.run.withSuccessHandler(showThings)
      .getLotsOfThings();
});

  function showThings(cat) {
  var list = $('#cats');
  var cat = BASIC_DATA.categories;
  var categoryName = cat[i][0];
  var categoryIcon = ICON[cat[i][0]];
  var categoryNumb = cat[i][1];
  list.empty();
  for (var i = 0; i < cat.length; i++) {
  list.append('<li name="' + categoryName + '" type="category"><span class="icon" style="background-position:' + categoryIcon + '"></span><span class="title">' + categoryName + '</span>(' + categoryNumb + ')</li>');
  console.log(list);
  }
  }

到目前为止，我的列表是空的，我在控制台中遇到错误

TypeError: google.script.run.withSuccessHandler(...).getLotsOfThings is not a function

这是我在Code.gs

中的getLotsOfThings()功能

    function getLotsOfThings(){
  var tabSheetCategories = SpreadsheetApp.openById(SHEET_ID).getSheetByName(CATEGORIES);
  var tabSheetAbout = SpreadsheetApp.openById(SHEET_ID).getSheetByName(ABOUT_DATA);
  var tabSheetHelp = SpreadsheetApp.openById(SHEET_ID).getSheetByName(HELP_DATA);
  BASIC_DATA = {
    "tab_about" : getValue(tabSheetAbout,"A2"),
    "tab_help": getValue(tabSheetHelp,"A2"),
    "categories": tabSheetCategories.getDataRange().getValues()
  };
  return false; 
    }

Answer 1

function getLotsOfThings(){
  var tabSheetCategories = 
  SpreadsheetApp.openById(SHEET_ID).getSheetByName(CATEGORIES);
  var tabSheetAbout = SpreadsheetApp.openById(SHEET_ID).getSheetByName(ABOUT_DATA);
  var tabSheetHelp = SpreadsheetApp.openById(SHEET_ID).getSheetByName(HELP_DATA);
  var BASIC_DATA = {
    "tab_about" : getValue(tabSheetAbout,"A2"),
    "tab_help": getValue(tabSheetHelp,"A2"),
    "categories": tabSheetCategories.getDataRange().getValues()
  };
 return BASIC_DATA; //Return the data to the client-side.
}

HTML客户端代码和Serveride代码（Code.gs）单独运行。我们必须将某些东西回到客户端。现在，我们有一个对象客户端，我们必须处理...

  function showThings(basicData) {
  var list = $('#cats');
  //var cat = BASIC_DATA.categories; //BASIC_DATA doesn't exist client-side, it's now passed in as 'basicData'
  Logger.log(JSON.toString(basicData)); //This is the data that has been passed in. It is a JSON object. You CANNOT use variables from the server-side script, only what hav been passed over.
  var cat = basicData.categories;
  //Do something with categories data...