How can I go about calling a function inside a Template literal.
The function syntax in the attempt below shows in the HTML:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
var html = `
<div class="row">
${reader.onload = function (e) {
$('#image_upload_preview').attr('src', e.target.result);
}}
<img id="image_upload_preview" src="http://placehold.it/100x100" alt="your image" />
</div>
`;
$("#test").append(html);
reader.readAsDataURL(input.files[0]);
}
}
$("#multi-file").change(function () {
readURL(this);
});
Thank you all in advance.
A more advanced form of template literals are tagged templates. Tags allow you to parse template literals with a function. The first argument of a tag function contains an array of string values. The remaining arguments are related to the expressions.
To call a function inside another function, define the inner function inside the outer function and invoke it. When using the function keyword, the function gets hoisted to the top of the scope and can be called from anywhere inside of the outer function. Copied!
Although single quotes and double quotes are the most popular, we have a 3rd option called Backticks ( `` ). Backticks are an ES6 feature that allows you to create strings in JavaScript. Although backticks are mostly used for HTML or code embedding purposes, they also act similar to single and double quotes.
If I understand your question correctly, you want to define and invoke the function inside the template literal.
Some background:
You can execute an expression in the template literal as follows:
function fun(){
return 5
}
var someLit=`some function got a value ${fun()}`
So this is the simplest and best usage of a function inside literal. Now what you are trying to do in your example is, evaluate the expression
reader.onload = function (e) {
$('#image_upload_preview').attr('src', e.target.result);
}
inside the template literal, this binds and event for onload, but the returned value for reader.onload
is replaced in that position inside the template literal.
and you see function(){...
in the output.
If you don't want to see that function declaration in the output you can immediately invoke the function.
Example:
(reader.onload = function (e) {
$('#image_upload_preview').attr('src', e.target.result);
})();
This will return undefined in the place of the expression. Now if you want to avoid that undefined
, you can return some empty string from your function.
(reader.onload = function (e) {
$('#image_upload_preview').attr('src', e.target.result);
return '';
})();
Now, as you have used this function as an callback for event, immediately invoking the function might not help(as you will not get the e parameter there).
So you can bind the event inside another function like:
(function(){
reader.onload = function (e) {
$('#image_upload_preview').attr('src', e.target.result);
}
return '';
})();
this will declare the function, which is bind to your onload
event and would not leave a trace in your template literal.
Note:
Simply declaring the function outside the template literal and calling it inside literal wherever you want is the best option
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With