模板化 HTML 中的动态 Javascript 输出答案

【问题标题】：Dynamic Javascript output in templated HTML模板化 HTML 中的动态 Javascript 输出
【发布时间】：2019-07-16 22:54:24
【问题描述】：

我正在尝试构建一个 Javascript 类，它接受一些选项并返回构建一个表单。我希望提交函数由传递给类的选项确定。所有的 HTML 都按预期输出，但我不认为正在输出的 javascript 正在被解析。当 HTML 呈现时，我得到一个语法错误 -

“意外的令牌功能”

当我尝试提交表单时，我得到一个

引用错误 - “{functionName} 未定义。”

这是目前的课程：

var ClassOptionsForm = function(options) {

  this.options = options

  this.getSubmissionFunction = function() {
    switch (this.options.type) {
      case 'standard':
        return this.standardSubmit;
        break;
      case 'extendable':
        return this.extendableSubmit;
        break;
    }
  }

  this.successHandler = "function (data, form) {\
     $(form).find('.result').text('Success!').css('color', 'green');\
  }"

  this.failureHandler = "function (data, form) { \
     $(form).find('.result').text('Something went wrong.').css('color', 'red');\
  }"

  this.submitFunctionName = this.options.optionName + "Submit";

  this.standardSubmit = "function " + this.options.optionName + "Submit(form) {\
      google.script.run\
        .withSuccessHandler(" + this.successHandler + ")\
        .withFailureHandler(" + this.failureHandler + ")\
        .withUserObject(form)\
        .setUserOption('" + this.options.optionName + "', form)\
  }"

  this.extendableSubmit = "function(this) {\
      // Extendable Form Submit
  }"


  this.buildForm = function() {
    var value = this.options.value;
    return '\
      <script type="text/javascript">\
      ' + this.getSubmissionFunction() + '\
      </script>\
      <h3>' + this.options.formTitle + '</h3>\
      <form id="' + this.options.optionName + '" onsubmit="' + this.submitFunctionName + '(this)">\
        ' + Object.keys(value).reduce(function(list, key) {
          return list + '<input name="' + key + '" value="' + value[key] + '"/>';
        }, '') + '\
        <button type="submit">Save</button>\
      </form>\
    '
  }
}

这是在 HTML 文件中调用表单渲染函数的方式：

<?!= GoogleAnalytics().optionsForm.buildForm(); ?>

这是最终的 HTML 输出：

<script type="text/javascript">
  function UAIDSubmit(form) {
    google.script.run
      .withSuccessHandler(function (data, form) {     
           $(form).find('.result').text('Success!').css('color', 'green');
      })
      .withFailureHandler(function (data, form) {      
          $(form).find('.result').text('Something went wrong.').css('color', 'red');
       })
      .withUserObject(form)
      .setUserOption('UAID', form)
  }
</script>
<h3>UAID</h3>
<form id="UAID" onsubmit="UAIDSubmit(this)">
   <input name="id" value="********">
   <button type="submit">Save</button>
</form>

我很确定这与 App Script 清理 HTML 的方式有关，而且我知道有上百万种方法可以在没有动态 JS 的情况下完成提交表单。我只是想让我的代码尽可能干燥，而且我很好奇。任何不涉及取消模板化 JS 的解决方法？

【问题讨论】：

我不明白您如何使用 GoogleAnalytics() 调用 ClassOptionsForm 方法。此外，该类是在 .gs 脚本中还是在 HTML 中声明的？
当你说“{functionName} is not defined.”时，函数的名称是什么？ UAIDSsubmit 还是 setUserOption？
该类在服务器端声明，但在 HTML 中通过调用 GooglaAnalytics() 启动，该对象返回一个对象，该对象包括存储为属性“.optionsForm”的 ClassOptionsForm 实例。是的，在提交时不会触发 UAIDSsubmit。
你能把关于“GoogleAnalytics()”的文档发给我吗？我在谷歌上没有找到任何关于如何使用它的信息。

标签： javascript forms google-apps-script web-applications referenceerror

【解决方案1】：

当您尝试提交表单时，它不起作用，因为您可以在 Google Script 函数中使用表单对象作为参数，但表单对象必须是该函数中的唯一参数。阅读此处[1]

[1]https://developers.google.com/apps-script/guides/html/reference/run

【讨论】：

你是对的！但这不是我的问题。我很难让提交函数（在本例中为 UAIDSsubmit 函数）开始运行。