[英]Send variables from Symfony2 PHP file to js file
我是JavaScript的新手,我對這方面的教程不太好。 如果有,請告訴我閱讀它們。
我想要做的是將變量從我的PHP控制器傳遞到.js文件 - 我想填充Highcharts變量。
我知道我可以發送響應,但我也需要加載模板。
這是模板:
...
{% block body %}
<h1>Months</h1>
// This is the Chart:
<div id="container" style="width:100%; height:400px;"></div>
{%block javascript%}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="{{ asset('bundles/acmebudgettracker/js/month.js') }}"></script>
{%endblock%}
{% endblock %}
.js文件名為month.js
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Budget for months'
},
xAxis: {
categories: ['Spent', 'Saved']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
和控制器:
public function monthsAction()
{
$this->setUser();
$month_repository = $this->setRepository('Month');
$month = new Month();
$form = $this->createForm(new MonthType(), $month);
$all_months = $month_repository->findByUser($this->user);
return $this->render('AcmeBudgetTrackerBundle:Months:months.html.twig', array(
'all_months' => $all_months,
'form' => $form->createView()
));
}
我想要做的是將控制器中的變量提供給month.js,並且仍然能夠顯示模板。 任何想法或教程如何實現這一目標? 提前致謝!
您可以生成javascript作為twig模板:
MonthsController.php
public function scriptAction()
{
// some logic
return $this->render('AcmeDemoBundle:Months:script.js.twig', array(
'user_months' => $user_months
));
}
使用routing.yml
javascript_route:
path: /generated-scripts/month.{_format}
defaults: { _controller: AcmeDemoBundle:Article:script, _format: js }
requirements:
_format: js|json
script.js.twig
$(function () {
var options = {
chart: {
type: 'bar'
},
title: {
text: 'Budget for months'
},
xAxis: {
categories: ['Spent', 'Saved']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: []
};
{% for user in user_months %}
options.series.push({ name: '{{ user.name }}', data: [{{ user.months|join(',') }}] };);
{% endfor %}
$('#container').highcharts(options);
});
快速和“臟”的答案:使用應答器在TWIG文件中設置變量,並在JS文件中使用這些變量。
<script>
var foo = {{ bar }};
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.