轨道 4，完整日历，显示事件数组

Question

希望有人能帮忙 - 我正在尝试在我的完整日历 Gem 实现中显示一系列事件。

在我的控制器中，我有：

@events_array = 
        [
            {
                title: 'event1',
                start: '2016-03-01'
            },
            {
                title: 'event2',
                start: '2016-03-05',
                end: '2016-03-07'
            },
            {
                title: 'event3',
                start: '2016-03-09T12:30:00',
                allDay: false
            }
        ]

在我看来，我有以下脚本：

<script>
    $(document).ready(function() {
        // page is now ready, initialize the calendar...
        $('#calendar').fullCalendar({
            // put your options and callbacks here
            height: "auto",
            events: "<%= @events_array %>"
        })
    });
</script>

上面的代码似乎没有将事件拉入日历。但是，当我将"<%= @events_array%>"替换为：

[
                {
                    title: 'event1',
                    start: '2016-03-01'
                },
                {
                    title: 'event2',
                    start: '2016-03-05',
                    end: '2016-03-07'
                },
                {
                    title: 'event3',
                    start: '2016-03-09T12:30:00',
                    allDay: false
                }
            ]

直接在视图脚本中，它可以工作。 =/任何建议？？谢谢！

编辑：HTML渲染：

<script>
    $(document).ready(function() {
        // page is now ready, initialize the calendar...
        $('#calendar').fullCalendar({
            // put your options and callbacks here
            height: "auto",
            events: "[{:title=&gt;&quot;event1&quot;, :start=&gt;&quot;2016-03-01&quot;}, {:title=&gt;&quot;event2&quot;, :start=&gt;&quot;2016-03-05&quot;, :end=&gt;&quot;2016-03-07&quot;}, {:title=&gt;&quot;event3&quot;, :start=&gt;&quot;2016-03-09T12:30:00&quot;, :allDay=&gt;false}]"
        })
    });
</script>

是额外的引号搞砸了吗？我将如何摆脱它？

Answer 1

如果它不包含用户生成的数据，则可能需要将其标记为 HTML 安全。

鉴于以下雇员再培训局：

<% @foo = [{title: 'event1',start: '2016-03-01'}] %>
<script>
  $(document).ready(function() {
    var bad = "<%= @foo %>";
    var better = <%= @foo.to_json.html_safe %>;
  });
</script>

您将获得以下 HTML：

<script>
  $(document).ready(function() {
    var bad = "[{:title=&gt;&quot;event1&quot;, :start=&gt;&quot;2016-03-01&quot;}]";
    var better = [{"title":"event1","start":"2016-03-01"}];
  });
</script>

请注意，bad是转义 JSON 的字符串，better是真正的 JSON。

但是，使用html_safe会带来安全风险，因此请谨慎使用！！如果用户内容进入其中，您将容易受到XSS的攻击：

• http://guides.rubyonrails.org/security.html#cross-site-scripting-xss
• https://www.owasp.org/index.php/Cross-site_Scripting_（XSS）

理想情况下，您的日历将从单独的端点获取 JSON，而不是将其包含在内联脚本中。