将变量从树枝传递给 js

Question

Is there some way to pass variables from twig to javascript file that lay in public/js directory of bundle. Or do I need to assign my variables in template and then include my script file where vars will be used?

Answer 1

Assign the variable in the template and pick it up with javascript...

<script>
var foo = '{{ foo }}';
alert(foo);
</script>

Answer 2

Another way without having to have your javascript file as a template would be to have the javascript value as a data-* attribute and then get that from your javascript file. This would mean that your javascript wouldn't necessarily be coupled to your twig file.

<a href="#" data-id="{{ entity.id }}" id="some-link">Link</a>

With jQuery..

var id = $('#some-link').data('id');

With regular javascript (i think)..

var id = document.querySelector('#some-link').dataset.id;

Answer 3

You can use this in your twig

<script type="text/javascript">
    /* <![CDATA[ */
    var settings = {
        example: {{ 'something' | trans }}
        }
    };
    /* ]]> */
</script>

then you can access them in your js:

console.log(settings.example);

Answer 4

watch this

variable in twig:    fpoint = [{'id': 1},{'id': 2}]

if it is an array

var fg = $.parseJSON('{{ fpoint | json_encode | raw }}');
for(k in fg){
  console.log("fpoint: ", fg[k].id);
}