javascript - 使用 Javascript 循环 HTML 元素时获取名称和链接值

Question

我正在为侧边栏的电子表格制作一个网络应用程序。

尝试处理实现这些条件的事件监听器:

• 选中复选框时(其中具有对应的名称和该名称的日历链接)
• 并挑选 2 个日期
• 然后单击按钮

全部完成后，从后端调用一个函数，该函数获取该名称的事件并将它们记录到工作表中。

我无法循环获取名称和日历的值。并且不确定放置它们的好方法是什么。我尝试以不同的方式处理它 - 没有运气。

我最终将所有问题缩小到以下两部分:

1)如何以最佳方式将数据加载到侧边栏。

2) 在用户与这些元素交互后如何循环访问该数据并获取值(取决于第 1 部分)。

如果有人在这方面为我提供更多帮助(一些相当简单的解决方案)，我将非常感激。

以下是在 html 文件中使用 GAS 的脚本的变体:

<? for (var i = 0; i < loopNamesForSidebar().names.length; i++) {  ?>
    <label>
       <input type="checkbox" class="filled-in check" checked="checked" />
       <span>
         <div class="collection">     
           <a href=" <?= loopNamesForSidebar().calendars[i] ?>" class="collection-item" >
             <?= loopNamesForSidebar().names[i]  ?>
           </a>
         </div>
       </span>
<? } ?>
    </label>

loopNamesForSidebar() 是一个后端函数，它循环转到侧边栏的名称和日历。每次我打开侧边栏时，该数据都会刷新。我的前端部分没有使用它。

这是 html 文件中的 Javascript 代码:

   //import jobs from calendars to sheet 
function importJobs() {
  //getting all checkboxes
  var allCheckboxes = document.getElementsByClassName("check")

  //getting inputs of start and end dates
  var startDate = document.getElementById("startDate").value
  var endDate = document.getElementById("endDate").value

  var chosenNames = []
  var calendars = []

  //looping all checkboxes
  for (var i = 0; i < allCheckboxes.length; i++) {
    //getting value of each checkbox
    var checkbox = allCheckboxes[i].checked;

    //if checkbox is checked
    if (checkbox == true) {
      //getting correspondant employee name
      var name = loopNamesForSidebar().names[i]

      //and push it to an array
      chosenNames.push(name)

      //getting correspondant employee calendar
      var cal = loopNamesForSidebar().calendars[i]
      calendars.push(cal)

    } else {
      continue;
    }
  };

  //push names and cals to object
  var employees = {
    names: chosenNames,
    cals: calendars
  }

  //call function to get calendar events
  google.script.run.getEvents(employees, startDate, endDate)
};

Answer 1

每Best Practices ，您应该异步加载任何 API/___ 服务调用输出。我只会对简单计算/检索的数据使用模板评估，例如来自PropertiesService , CacheService 、静态定义或基于输入参数的简单查找(即 doGet 和 doPost 触发函数的查询字符串/有效负载数据)。如果平均花费时间超过四分之一秒，则对于同步使用来说太慢了。

所以:

function templateOK(param) {
  const val = PropertiesService.getScriptProperties().getProperty(param);
  return val ? JSON.parse(val) : [
    "name 1", "name 2", "name 3"
  ];
}
function shouldRunAsync(param) {
  const sheet = param ? SpreadsheetApp.getActive().getSheetByName(param) : null;
  return sheet ? sheet.getDataRange().getValues() : [];
}

假设您已正确设置 GS 和 HTML 文件的其他部分，.html 的 <script> 之一标签可能看起来像这样:

$(document).ready(() => loadServerData()); // jQuery
function loadServerData() {
  const TASK = google.script.run.withSuccessHandler(useNames); // has implicit failure handler of `console`
  // Schedule this to be run every so often
  const intervalMS = 10 * 60 * 1000; // 10 minutes
  setInterval(sheetName => TASK.shouldRunAsync(sheetName), intervalMS, "Names");
  // Invoke promptly too.
  TASK.shouldRunAsync("Names");
  console.log(new Date(), "Set schedule & invoked server function");
}
function useNames(serverValue, userObject) {
  console.log(new Date(), "Got Value from server", serverValue);
  // use the return value to do stuff, e.g.
  const cbDiv = $("id of div containing checkboxes"); // jQuery
  /** could add code here to read existing checkbox data, and
      use that to maintain checked/unchecked state throughout loads */
  cbDiv.innerHTML = serverValue.map((name, idx) => `<p id="${name}">${idx + 1}: ${name}</p>`).join("");
}

一如既往，请确保您非常熟悉可序列化数据类型和客户端-服务器通信模型:https://developers.google.com/apps-script/guides/html/communication

其他引用

• Element#innerHTML
• Array#map
• setInterval
• Arrow functions
• Template literals