Where should I define JS function to call in EJS template

问题

I am working on a template where I am trying to render template using express and ejs. As to the standard structure of node app, I have app.js file which which contains functions like following:

app.locals.getFlag = function(country) {
var flag_img_name = "";
if (country.toLowerCase() == "us") {
    flag_img_name = "flag_us16x13.gif";
}   
else if (country.toLowerCase() == "ca"){
    flag_img_name = "flag_ca16x13.gif";
}
return flag_img_name;
}

I have some_template.ejs file which calls this function like follows:

<img src="http://some_url_path/<%=getFlag(data_point[0].country_name) %>" width="16" height="14" alt="country" >

and it works just fine. However, I have around 15-20 functions like this and I don't want to define all of them in app.js. Is there any other place where I can define these functions and call them in the template same way as I am doing now? If yes, what would be the way to define them so that they are accessible like they are right now.

I am new to node, express and ejs and not sure of different techniques. If someone could shed a light over it, it would be great. Thank you in advance.

回答1:

Just posting this answer here for someone who would might end up on this question while resolving same issue.

All you have to do is create new file (say functions.ejs) and include it in the .ejs file where you want to call that function. So, I have function like this in file named functions.ejs:

<%
getPriceChgArrow = function(value) {
    arrow_img_name = "";
    if (value < 0) {
        arrow_img_name = "arrow_down12x13.gif";
    }
    else {
        arrow_img_name = "arrow_up12x13.gif";
    }
    return arrow_img_name;
}
%>

Then include functions.ejs into the file you want to call function from. Say, I want to call this function in quote.ejs file. So, I would include it as follows:

<% include *file_path*/functions %>

Just use this function at appropriate location in your ejs file from where you want to call it. For example:

<img src = "http:/some_url/<% getPriceChgArrow(data_point[0].value) %>" />

and you are all set. Hope this helps someone.

回答2:

Well, for some reason the accepted answer didn't worked out for me. Also it doesn't makes sense to create a separate *.ejs file for each of my functions and then importing the file in view - specially when I have very simple logic to be implemented.

In fact it is very simple and easy to define function and use it in the view

I did this:

<%
   // ------ Define a function
   get_tree = function(tree){
      for(var i in tree){
%>
     <%= tree[i].title %>
<%
      }
   }
  // ----- Call the above declared function
  get_tree(tree);
%>

And it works!

Thanks

回答3:

You can just require a separate file and set app.locals to this

app.locals = require('./path/helpers')

In helpers.js:

getFlag = function(country) {
var flag_img_name = "";
if (country.toLowerCase() == "us") {
    flag_img_name = "flag_us16x13.gif";
}   
else if (country.toLowerCase() == "ca"){
    flag_img_name = "flag_ca16x13.gif";
}
return flag_img_name; 
}
anotherFunction=function(x){
return 'hello '+x
}

   module.exports={getFlag, anotherFunction}

回答4:

It seems the easiest way to do this is to pass the function in attached to the object with all the data for the render:

in your js:

const data = {
  ...all other data,
  getFlags: function(country) {
    var flag_img_name = "";

    if (country.toLowerCase() == "us") {
      flag_img_name = "flag_us16x13.gif";
    } else if (country.toLowerCase() == "ca"){
      flag_img_name = "flag_ca16x13.gif";
    }

    return flag_img_name;
  }
};

ejs.render(template, data);

in your template:

<img src="http://some_url_path/<%=getFlag(data_point[0].country_name) %>" width="16" height="14" alt="country" >

回答5:

In a js file, create a instance of the function like: if your function name is test (), Var ren = test (); will create a reference to this function.

Before rendering data to the ejs page add the reference variable ren to that object:

Data.ren = ren();

Res.render(Data)

And now in ejs while when you call <% ren() %> it will call the fonction.

来源：https://stackoverflow.com/questions/30535309/where-should-i-define-js-function-to-call-in-ejs-template

标签

node.js

express

ejs