如何在前端 js 中使用 symfony 控制器变量？答案

【问题标题】：how to use symfony controller variables in frontend js?如何在前端 js 中使用 symfony 控制器变量？
【发布时间】：2016-10-20 14:05:31
【问题描述】：

假设我有一个这样的控制器：

public function showAction(Request $request, $id, $context = array())
{
    $url = $this->getPlayUrl($id, $context);

    //some code here}

我想在这样的前端 js 文件中使用变量 $url：

var html = '<iframe src=\''+ url +'\' name=\'viewerIframe\' id=\'viewerIframe\' width=\'100%\'allowfullscreen webkitallowfullscreen height=\'100%\' style=\'border:0px\'></iframe>';

我应该如何做到这一点？对于上面的代码，它给了我“未定义的 url”错误。

谢谢。

【问题讨论】：

标签： javascript php symfony

【解决方案1】：

另一种选择是让您的模板调用控制器操作（以便您可以根据需要传递参数），例如，使用 highchart.js 的示例：

{% block javascripts %}
    {{ parent() }}
    <script src="/js/highcharts.js"></script>
    <script src="/js/exporting.js"></script>
    <script type="text/javascript">
        {{ render(controller('AppBundle:Default:script')) }}
    </script>
{% endblock %}

在控制器中是这样的：

public function scriptAction() {
    $reports = $this->get('app.reports');
    $chart = $reports->getDistsFYToDate();

    return $this->render('Default/script.js.twig', array(
                'chart' => $chart,
    ));
}

script.js.twig 看起来像这样：

$(document).ready(function () {
    var options = {
        chart: {
            type: 'line'
        },
        title: {
            text: 'Distributions, FY{{ chart.fy }} to date'
        },
        xAxis: {
            categories: [{% for category in chart.categories %}{{category|raw}}{%endfor%}]
        },
        yAxis: {
            title: {
                text: 'Distributions'
            }
        },
        series: {{ chart.series|raw }}
    };

    $('#linechart').highcharts(options);
})

【讨论】：

【解决方案2】：

如果你使用 HTML5 数据属性可能会更好：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

【讨论】：

【解决方案3】：

在您的视图中添加一些脚本标签并将 javascript vraible 分配给 twig 变量。不要忘记引用树枝（如果需要）。

首先，我会确保 $url 总是有一个值；

return $this->render('MyWebBundle:Player:show.html.twig', array(
        'file'             => $file,
        'url'              => (empty($url)) ? '' : $url,
        'context'          => $context,
        'player'           => $player,
        'agentInWhiteList' => $agentInWhiteList
    ));

类似的东西；

<script>
var jsVar = '{{ url }}';
var html = false;

if (jsVar.length > 0) {
    html = '<iframe src=\''+ jsVar +'\' name=\'viewerIframe\' id=\'viewerIframe\' width=\'100%\'allowfullscreen webkitallowfullscreen height=\'100%\' style=\'border:0px\'></iframe>';
}

// test html !== false before using it
</script>

【讨论】：

把它放在最合适的地方，如果那部分 js 只是在一个视图中，把它放在那里。这一切都取决于您的树枝布局（扩展、包含、块等）。
我认为测试它的最佳方法是将其放在整个站点共享的页脚块中，但它仍然给我'ReferenceError：jsVar未定义----- var html = '
更新答案以回答您的一些问题
谢谢，但它仍然不起作用。我必须说'show.html.twig'是无关紧要的，传递给它的变量也是如此。我只想在 js 中使用 $url，就像在 show.html.twig' 中使用它一样。
刚刚更新了问题，以便您有更好的想法。