客户端 JavaScript 未在 Apps 脚本模板中呈现答案

【问题标题】：Client-side JavaScript not rendering in Apps Script template客户端 JavaScript 未在 Apps 脚本模板中呈现
【发布时间】：2018-08-09 01:13:59
【问题描述】：

我正在尝试将一些内容放入来自 Google Apps 脚本的自动回复消息中。我的项目有一个 AutomatedResponseTemplate.html 脚本命中一些响应 HTML 字符串来发送。该文件的定义如下：

<!DOCTYPE html>
<html>
    <head>
        <script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>
        <script src=https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.1/mustache.js></script>
        <script>
            $(function() { 
                let data = <?= JSON.stringify(messageData) ?>
                // make request to "server"
                template = $('body').html()
                rendering= Mustache.render(template, data)
                $('body').html(template)
            })
        </script>
        <style>
            #closing { 
                white-space: pre-line;
            }

            .separate-lines { 
                white-space: pre-line;
            }

            .first { 
                width: 80px;
            }

            .left {
                float: left;
            }
        </style>
    </head>
    <body>

        <p>
            {{name}}
        </p>
        <p>
        Thank you for reaching out to us! This is an automated reply, and one of us shall reach out to you, 
                    for real, shortly. Here is a copy of the message you sent us for reference:
        </p>
        <p>
        <blockquote class=separate-lines>
        <span><label class="first left">Sender:</label> {{sender}}</span>
        <span><label class="first left">Subject:</label> {{subject}}</span>
        <span><label class="first left">Message:</label> {{message}}</span>
        </blockquote>

        </p>


        <p id=closing>           
                    Mike Warren
                    Open Source Roads
        </p>
    </body>
</html>

为了分离关注点并保持 RESTful，我让脚本通过该标签将相关数据发送到 HTML。 There's a working pure-client-side version prior 和implementation here 的想法让我有了这样做的想法。

有一个问题：它不起作用。即使我附加了一些非模板代码

$('#data').text('This was inserted by jQuery')

还有一个标签

<p id=data></p>

...没有任何变化。

世界上到底发生了什么？

更新我将<script> 标签更新为：

<script>
        $(function() { 
            let data = <?!= JSON.stringify(messageData.data) ?>
            // make request to "server"
            template = $('body').html()
            rendering= Mustache.render(template, data)
            $('body').html(rendering)
            $('#data').text('This text was inserted by jQuery')
        })
    </script>

，用引号将客户端依赖项上的 src 值括起来（我知道为什么这对 Google Apps 脚本很重要，因为它在其他地方工作正常），并提供了一个 doGet 用于调试目的：

function doGet(e) { 

  var messageData = { 
    data: {
      sender:  'mwarren04011990@gmail.com',
      name: 'Test User',
      recipient: Session.getActiveUser().getEmail(),
      subject: 'Test email',
      message: 'Hello world'
    }
  }
  var template =  HtmlService
    .createTemplateFromFile('AutomatedResponseTemplate')
  template.messageData = messageData
  return template
    .evaluate()
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
}

此外，应该将此客户端模板呈现为字符串的函数具有以下代码：

/**
 * Generates an email message body in response to the sender's `messageData`
 * @param {object} messageData - a JSON object with at least the following: 
 *  - `sender`
 *  - `name` 
 *  - `subject`
 *  - `message`
 */
function getAutomatedResponseTo(messageData) { 
  messageData = messageData || {};
  if (!messageData.sender) return '';
  if (!messageData.name) return '';
  if (!messageData.subject) return '';
  if (!messageData.message) return '';


  var template = HtmlService
    .createTemplateFromFile('AutomatedResponseTemplate')
  template.messageData = messageData;

  return template
    .evaluate()
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .getContent()
}

我试图以这种方式分离关注点是否不可行？

【问题讨论】：

你遇到了什么错误？
你为什么在谷歌应用脚本中使用{{ }}？我认为它们不受支持，而是使用<?= ?>
如何将数据传递给模板？
{{}} 是 Mustache.js 使用的胡须。 github.com/janl/mustache.js 。至于错误，我没有收到，但是当电子邮件发送时，胡子不会被它们应该代表的数据替换

标签： javascript jquery google-apps-script mustache

【解决方案1】：

我认为您缺少一个 !。这是我使用的代码：

<script>
    var data = <?!= JSON.stringify(dataFromServerTemplate) ?>;
</script>

您可以发送console.log(data) 并在开发者工具中查看，看看您会得到什么。

【讨论】：

这是朝着正确方向迈出的一步，现在，经过一些更改（我忘记使用rendering，也忘记发送data 成员对象，我添加了一个doGet使用模板渲染），我能够很好地获取页面，但是在字符串输出中，它没有正确输出（胡子仍然存在）。我会更新问题以反映这些变化。

【解决方案2】：

我只是继续让 Google Apps 脚本处理所有的模板。（抱歉，Mustache.js，但如果没有打开浏览器来展示您的作品，您似乎无法工作！）

我取出了<script> 标记，并将小胡子替换为直接包含数据字段的Google Script 模板标记。例如，我将{{name}} 替换为<?= messageData.name ?>。

【讨论】：

我还将所有 return '' 替换为抛出错误的语句，以解决发送无效数据的空白电子邮件的问题。

【解决方案3】：

我已经复制了您的错误。如果您查看 chrome 中的开发人员工具，您会看到以下错误：

这意味着 jQuery 不可用。

如果您查看开发人员工具中的网络选项卡，您会看到加载 jquery 的尝试失败并且 url 被严重损坏：

解决方案是使用脚本标签为正在加载的资源加上引号：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.1/mustache.js"></script>

完成后，对话框似乎可以正常工作，并且 Mustache 模板已正确填充。一些浏览器可以在没有引号的情况下使用，但 Google Apps 脚本似乎不能。

【讨论】：