web-dev-qa-db-fra.com

Où devrais-je définir la fonction JS à appeler dans un modèle EJS

Je travaille sur un modèle où j'essaie de rendre le modèle en utilisant express et ejs. En ce qui concerne la structure standard de noeud app, j'ai le fichier app.js qui contient les fonctions suivantes:

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;
}

J'ai un fichier some_template.ejs qui appelle cette fonction comme suit:

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

et cela fonctionne très bien. Cependant, j'ai environ 15-20 fonctions comme celle-ci et je ne veux pas toutes les définir dans app.js. Existe-t-il un autre endroit où je peux définir ces fonctions et les appeler dans le modèle de la même manière que je le fais maintenant? Si oui, quelle serait la manière de les définir afin qu’ils soient accessibles comme ils le sont actuellement?.

Je suis nouveau dans les domaines node, express et ejs et je ne suis pas sûr des techniques différentes. Si quelqu'un pouvait nous éclairer, ce serait formidable. Merci d'avance.

node.jsexpressejs
8
DotNetNewBie

Il suffit de poster cette réponse ici pour quelqu'un qui pourrait se retrouver sur cette question tout en résolvant le même problème.

Tout ce que vous avez à faire est de créer un nouveau fichier (disons functions.ejs) et de l'inclure dans le fichier .ejs où vous souhaitez appeler cette fonction. Donc, j'ai une fonction comme celle-ci dans le fichier nommé 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;
}
%>

Ensuite, incluez functions.ejs dans le fichier à partir duquel vous voulez appeler une fonction. Dis, je veux appeler cette fonction dans le fichier quote.ejs. Donc, je voudrais l'inclure comme suit:

<% include *file_path*/functions %>

Utilisez simplement cette fonction à l'emplacement approprié dans votre fichier ejs à partir de l'endroit où vous souhaitez l'appeler. Par exemple:

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

et vous êtes tous ensemble. J'espère que ça aide quelqu'un.

28
DotNetNewBie

Eh bien, pour une raison quelconque, la réponse acceptée n'a pas fonctionné pour moi. En outre, il n’a aucun sens de créer un fichier *.ejsdistinct pour chacune de mes fonctions, puis importer le fichier dans la vue - en particulier lorsque j’ai une logique très simple à implémenter.

En fait, il est très simple et facile de définir une fonction et de l’utiliser dans la vue

J'ai fait ça:

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

Et il fonctionne!

Merci

7
Siddhartha Chowdhury

Il semble que le moyen le plus simple de le faire est de transmettre la fonction attachée à l'objet avec toutes les données pour le rendu:

dans votre 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);

dans votre modèle:

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

Vous pouvez simplement exiger un fichier séparé et définir app.locals sur cette 

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

Dans 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}
0
Rik