如何将JavaScript变量用作文本？

Question

抱歉再次发布此内容，但我在互联网上找不到有用的信息。 我正在尝试创建一个日历。我使用Symfony 3和fullcalendar来创建它。 因此，在我的twig类中，我创建了一个变量：

{% set fff = "" %}

我将一些文本添加到fff变量中，例如{start: "2017-05-17", title: "从机场接我妈妈"} 然后我将fff变量传递给JS：

<script>
    var allTasks = {{ fff|json_encode()|raw }};
</script>

如果我想要添加这个任务 {start: "2017-05-17", title: "Take my mom from airport"}, 到日历的 allTasks 变量 中。所以我创建了一个函数：

$(function(){
    $('#calendar').fullCalendar({
         events: [
             //there I should add tasks
             //f.e. {start: "2017-05-17", title: "Take my mom from airport"},
             //this code adds a task into my calendar 
         ],
     });
 });

当我像例子中那样放置代码时，它可以正常工作，但是当我尝试做类似以下的事情时：

$(function(){
    $('#calendar').fullCalendar({
        events: [
            allTasks, //this variable is equal to "{start: "2017-05-17", title: "Take my mom from airport"},"
        ],
     });
 });

这对我没有任何帮助。甚至我的网页上的日历都消失了。 所以问题是我做错了什么？allTasks变量输出{start: "2017-05-17", title: "从机场接我妈妈"},。我已经测试过它，但当我尝试在我的函数中使用它时它不起作用。

错误日志: [2017-05-15 11:40:36] request.ERROR: 未捕获的 PHP 异常 Symfony\Component\HttpKernel\Exception\NotFoundHttpException: "找不到路由 "GET /[%7Bstart:'2017-05-17',title:'Take%20my%20mom%20from%20airport'%7D]" （来自 "http://127.0.0.1:8000/home"）" 在 /home/david/task_manager/var/cache/dev/classes.php 的第 3497 行 {"exception":"[object] (Symfony\\Component\\HttpKernel\\Exception\\NotFoundHttpException(code: 0): 找不到路由 \"GET /[%7Bstart:'2017-05-17',title:'Take%20my%20mom%20from%20airport'%7D]\" （来自 \"http://127.0.0.1:8000/home\"） 在 /home/david/task_manager/var/cache/dev/classes.php 的第 3497 行, Symfony\\Component\\Routing\\Exception\\ResourceNotFoundException(code: 0): 在 /home/david/task_manager/var/cache/dev/appDevDebugProjectContainerUrlMatcher.php 的第 162 行)"} []

- David

---

JavaScript 可能不喜欢您在事件数组的最后一个元素之后加上逗号 - 这是 PHP 和 JavaScript 之间的差异（PHP 允许您使用尾随逗号），请注意。 - mkilmanas

另一件事 - 作用域。allTasks 是否定义在全局作用域中？或者 <script> 标签是否在没有任何类型/语言属性的情况下接受它的定义？例如，console.log(allTasks) 是否实际打印出任何内容？ - mkilmanas

@mkilmanas 我尝试将 allTasks 变量打印到我的网页上，它打印出了我所需的文本。 - David

@mkilmanas 不，你是对的。逗号导致语法错误，从而阻止JS的其余部分执行。这就是为什么OP根本看不到日历的原因。 - DarkBee

@hassan 添加了错误日志 :) - David

Answer 1

你可以尝试这个：

<script>
    var allTasks = '{{ fff|json_encode()|raw }}'; // make sure that fff return {'start': '2017-05-17', 'title': 'Take my mom from airport'}
</script>

$(function(){
    $('#calendar').fullCalendar({
        events: [
            JSON.parse(allTasks)
        ],
     });
 });

- R.Safouane