模板化HTML中的动态Javascript输出

我试图构建一个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>\
    '
  }
}

var ClassOptionsForm=函数（选项）{
this.options=选项
this.getSubmissionFunction=函数（）{
开关（this.options.type）{
案例“标准”：
返回此文件，然后提交；
打破
案例“可扩展”：
返回this.extendableSubmit；
打破
}
}
this.successHandler=“函数（数据、表单）{\
$（form）.find（'.result'）.text（'Success！'）.css（'color'，'green'）\
}"
this.failureHandler=“函数（数据、表单）{\
$（form）.find（'.result'）.text（'出了问题'）.css（'颜色'，'红色'）\
}"
this.submitFunctionName=this.options.optionName+“提交”；
this.standardSubmit=“function”+this.options.optionName+“提交（表格）{\
google.script.run\
.withSuccessHandler（“+this.successHandler+”）\
.withFailureHandler（“+this.failureHandler+”）\
.withUserObject（表单）\
.setUserOption（“+this.options.optionName+”，表单）\
}"
this.extendableSubmit=“函数（this）{\
//可扩展表格提交
}"
this.buildForm=函数（）{
var值=this.options.value；
返回'\
\
“+this.getSubmissionFunction（）+”\
\
“+this.options.formTitle+”\
\
'+Object.keys（值）.reduce（函数（列表，键）{
返回列表+“”；
}, '') + '\
拯救\
\
'
}
}

下面是如何在HTML文件中调用form render函数：

<?!= 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>

函数UAIDSubmit（表单）{
google.script.run
.withSuccessHandler（函数（数据、表单）{
$（form）.find（'.result'）.text（'Success！'）.css（'color'，'green'）；
})
.withFailureHandler（函数（数据、表单）{
$（form）.find（'.result'）.text（'出了问题'）.css（'颜色'，'红色'）；
})
.withUserObject（表单）
.setUserOption（'UAID'，表单）
}
UAID
拯救

---

我很确定这与应用程序脚本净化HTML的方式有关，我知道在没有动态JS的情况下，有无数种方式可以完成表单提交。我只是想让我的代码尽可能的干涸，而且我很好奇。任何不涉及删除模板JS的解决方法？

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

---

[1]

我不明白如何使用GoogleAnalytics（）调用ClassOptionsForm方法。此外，该类在.gs脚本中或HTML中声明？当您说“{functionName}未定义”时，它是函数的名称？UAIDSubmit或setUserOption？该类在服务器端声明，但通过调用GooglAnalytics（）在HTML中启动，该函数返回一个对象，该对象包含存储为属性“.optionsForm”的ClassOptionsForm实例。是的，提交时没有被解雇的是UAIDSubmit。你能给我发送关于“GoogleAnalytics（）”的文档吗？我在谷歌上没有找到任何关于如何使用它的信息。你说得对！但这不是我的问题。我很难让submit函数（在本例中是UAIDSubmit函数）开始运行。