Question

我正在尝试将一些内容放入来自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>

要分开关注点并使内容保持REST，我让脚本通过该标签将相关数据发送到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值放在客户端依赖项上（idk为什么对Google Apps脚本重要，因为它在其他地方可以正常工作），并提供了doGet用于调试：< / p>

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()
}

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

Answer 1

我认为您缺少！。这是我使用的代码：

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

您可以做一个console.log(data)并在开发人员工具中查看它，看看您能得到什么。

Answer 2

我只是继续进行，并让Google Apps脚本处理了所有模板。（对不起，Mustache.js，但是，如果没有打开浏览器来显示您的工作，您似乎就无法工作！）

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

Answer 3

我已复制了您的错误。如果您使用Chrome浏览器查看开发人员工具，则会看到以下错误：

这意味着jQuery不可用。

如果您在开发人员工具中查看“网络”标签，则会看到加载jquery的尝试失败，并且网址受到严重干扰：

解决方案是使用脚本标记在要加载的资源周围加上引号：

LinkedBlockingQueue

完成此操作后，对话框似乎可以正常工作，并且正确填充了Mustache模板。某些浏览器可以不带引号而运行，但是Google Apps脚本似乎不能。

无法在Apps脚本模板中呈现客户端JavaScript

3 个答案: