Let's say the variable is called 'myvar'. I can access its value in twig using {{ myvar }}.
I can also use it inside javascript code, if inside the same twig page, by doing
<script>
//some javascript code
myJSVar = {{ myvar }};
//other javascript code
</script>
The question is: if I import a js (e.g. I have a main.js where I put all the common js stuff) is there a way do the same?
I've read about a solution for CSS (Symfony2: Use Twig variable in stylesheet) which is a bit convoluted, and another point of reference might be here (Using Twig as an Assetic filter for JavaScript in Symfony2). Any other options?
In practice what I need is passing a global variable, something that you'd find in config.yml. It's a path basically, which is different in production and in development.
Thank you!
Perhaps you could do something like:
<div id="somediv" data-var="{{ myvar }}"></div>.
And then on you main.js:
var myJSVar = $('#somediv').data('var');
Related
Currently I have my Django project set up so that the JS variables that depend on template variables are first defined under a script tag in the HTML template. Then, when the template runs, the JS variable gets created and added to the Javascript context, causing other external JS scripts to be able to use said variable without declaring it anywhere.
Html template:
<body>
content
</body>
<script>
const var = "{{ my_template_var }}";
</script>
<script type="module" src="{% url 'app_name/index.js' %}"></script>
JS Script (app_name/index.js)
console.log(var) // Prints value of "my_template_var" in the form of a string
However, I dont like the fact that the var variable in the JS script just "magically" has the value defined in the template when it runs (there's no actual statement saying const var = something). Is there any way that I can include a declaration in my JS file (not a comment) so that its a bit clearer to the rest of the developers from where the variable is coming from?
(NOTE: I'm mainly doing this as well because when using Typescript, those variables appear as undefined, even though they are receiving a value from somewhere)
The best way that I found I could do this is by using the declare statement on the Typescript file. So variables that received their value from another script tag:
<!-- Index.html -->
<script>
variable = 5
</script>
<script type="text/javascript" src="script.js"></script>
I can just do:
// script.ts that compiles into script.js
declare const variable: type;
I saw many examples assigning twig to JS variables in <script> tag, so I decided to call twig function inside click event, but unfortunatelly, clicked or not, it is still executing the TWIG code.
$(document).ready(function() {
$('#sign_up_trainee .btn-social').click(function() {
{{ app.session.set('name', 'value1') }}
});
$('#sign_up_company .btn-social, #sign_up_university .btn-social').click(function() {
{{ app.session.set('name', 'value2') }}
});
});
In the end when page is loaded it is executing the twig and session by the name 'name' is set to 'value2'. Twig is rendered way earlier than JS is executed. Any ideas how to properly execute twig inside JS?
youre misunderstanding the purpose of twig. Twig is a templating language.
This means its run on the server before it sends the output to the browser. You would use it to template some JS, before its returned.
If its used correctly (templating is run on a xxx.js.twig file) the twig 'code' is never even present in the file on the client browser at all.
As you stated yourself twig is executed before JS. Twig itself gets compiled into PHP and therefor is interpreted before leaving the server.
The only thing you can pass to JS itself are evaluated methods and store them as a variable, that is if you place them inside your twig file e.g. :
<script>
var current_date = '{{ "now" | date('d-m-Y') }}';
</script>
The only proper way to execute a twig method and get proper response is by calling the controller with an ajax call
I've got a javascript global that is available in my Angular partial:
<script>
console.log(tm.staticUrl);
</script>
I don't know how to reference it in the below call:
<div ng-init="templateUrl = 'partials/essay.html'">
I need to adjust the url based on if we're on a remote server or developing locally, but have no idea how to do this. I've tried variations of this:
<div ng-init="templateUrl = tm.staticUrl + 'partials/essay.html'">
But feel like I'm misunderstanding how these strings are parsed.
I have a EE template in which I use a EE global variable {global_var}.
In the same template I have a js script.
//opening js script tag
{global_var}
//closing js script tag
Inside this script I can read and use {global_var}.
But if I move the script code to a JS template and reference to it like this
<script type="text/javascript" src='{path="js/contact_form"}'></script>
the {global_var} is no more available, why?
More info: {global_var} is a user defined variable that I added to index.php
$assign_to_config['global_vars'] = array(
"base_url" => "http://www.example.com/",
"global_var" => "hello"
);
Is there a way to read EE global variables in the referenced js file?
Try to add quotation mark to the global variable when you're outputting it to the Js.
"{global_var}"
Another reason why it may not work can be either:
The variable doesn't exist in the the DB So you might need to use syncSnippert to synchronize between the two.
The template for the variable doesn't exist so you might need to create it.
I typically set up jquery templates in my html files like this:
<script id="some-template" type="text/x-jquery-tmpl">
my template contents go here... with some data: {data}
</script>
then my javascript that needs to use this template would look for it by the id and pass in the needed data:
var template = $("#some-template");
var html = template.tmpl({data: "data goes here..."});
// do something with the 'html' var, like attach it to the DOM
now i'm trying to write jasmine-bdd specs for my javascript. i don't see anything particularly wrong with the way i set up my templates and have my javascript find / expand the template... but i'm not sure how to get jasmine to play nice with this... so...
how can i use jasmine to test my javascript, when my javascript relies on a jquery-template, and the template is defined in my html page directly?
do i have to duplicate my template in a jasmine-jquery fixture? or is there a way to make a jasmine-jquery fixture use my existing html / template definition?
in case anyone is interested, here's how i solved this: http://lostechies.com/derickbailey/2011/09/06/test-driving-backbone-views-with-jquery-templates-the-jasmine-gem-and-jasmine-jquery/