如何在前端js中使用symfony控制器變量？

Question

說我有一個像這樣的控制器：

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>';

我應該如何做到這一點？ 對於上面的代碼，它給了我“未定義的網址”錯誤。

謝謝。

Answer 1

在您的視圖中，添加一些腳本標簽，並將JavaScript可變變量分配給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>

Answer 2

如果您使用HTML5數據屬性，則可能會更好： https ： //developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Using_data_attributes

Answer 3

另一個選擇是讓您的模板調用控制器動作（以便您可以根據需要傳遞參數），例如，如以下使用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);
})