如何使用 SilverStripe 循环填充 JavaScript 数组答案

【问题标题】：How to populate a JavaScript array with a SilverStripe loop如何使用 SilverStripe 循环填充 JavaScript 数组
【发布时间】：2019-07-24 14:19:02
【问题描述】：

我有一个 .SS 文件，其中包含一个脚本标记内的 JavaScript 数组，需要使用来自后端的数据进行填充。

数据是不同的日期，JavaScript 数组在填充后需要如下所示：

var dateArray = ['01/02/2014', '01/03/2016', '05/02/2014'];

这是我目前所拥有的：

<script>
  var dateArray = <% loop $Children %>[$ID],<% end_loop %>;
  var contentArray = <% loop $Children %>[$IDcontent],<% end_loop %>;
</script>

我也试过这个：

<% if $Children %>
<% loop $Children %>
    <script>
    var dateArray = [$ID];
    var contentArray = [$IDcontent];
    </script>
<% end_loop %>

【问题讨论】：

【解决方案1】：

我最终使用了一个对象，这似乎有效：

<script>
var myEvents = [
      <% loop Children %>
      {
        date: $ID,
        content: '$ID'
      },
      <% end_loop %>
    ];
<script/>

我意识到这并不能完全回答 OP，但您可以将对象转换为字符串。

【讨论】：

【解决方案2】：

不能在脚本标签内运行loop。您可以循环脚本标记或从 HTML 元素中提取数据。对于此类问题，您需要从 HTML 元素中提取数据，如下所示。

例如：

HTML

<p class="GrabDate">
    <% loop $Children %>$ID <% if not $Last %>,<% end_if %><% end_loop %>
</p>

JavaScript

var dateArray = parseInt($(".GrabDate").text());

这将使您的函数按预期运行而不会出现问题。您需要隐藏 .GrabDate 类。

【讨论】：

实际上，可以在 .ss 模板中的 <script> 标记内使用 SilverStripe 循环。话虽如此，这是有效的替代解决方案。
与其将数据作为内容然后隐藏元素，我认为这可以通过将数据放入标签上的数据属性来改进。例如<div class="calendar" data-script-dates="SilverStripe loop goes here">...</div>。然后可以使用jQuery('.calendar').data('script-dates'); 获取这些值

【解决方案3】：

试试这样：

var dateArray = [<% loop $Children %>"$ID"<% if not $Last %>,<% end_if %><% end_loop %>];

【讨论】：