Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to call calling a function inside a Template literal

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.

like image 729
Program-Me-Rev Avatar asked Jun 22 '16 08:06

Program-Me-Rev


People also ask

Can you put a function in a template literal?

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.

How do you call a function inside?

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!

What is `` in JS?

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.


1 Answers

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

like image 77
Naeem Shaikh Avatar answered Sep 22 '22 09:09

Naeem Shaikh