Question

我正在制作一个模板，我正在尝试使用express和ejs渲染模板。至于节点应用程序的标准结构，我有app.js文件，其中包含如下函数：

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

我有some_template.ejs文件调用此函数，如下所示：

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

它工作得很好。但是，我有大约15-20个这样的函数，我不想在app.js中定义所有这些函数。还有其他地方可以定义这些函数并在模板中调用它们，就像我现在一样吗？如果是，那么定义它们的方式是什么，以便它们像现在一样可以访问。

我是节点，表达和ejs的新手，并不确定不同的技术。如果有人可以为它揭开光芒，那就太好了。提前谢谢。

Answer 1

只需将此答案发布给可能会在解决同一问题时最终解决此问题的人。

您所要做的就是创建新文件（比如functions.ejs）并将其包含在您要调用该函数的.ejs文件中。所以，我在名为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;
}
%>

然后将functions.ejs包含在要调用函数的文件中。说，我想在quote.ejs文件中调用此函数。所以，我会把它包括如下：

<% include *file_path*/functions %>

只需在您要调用它的ejs文件中的适当位置使用此功能。例如：

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

你们都已经准备好了。希望这有助于某人。

Answer 2

在js文件helper.js中创建常用功能。

function common1() {
    //function body
}
function common2(key) {
    //function body
}
module.exports = {
    common1: common1,
    common2: common2
}

然后在您的节点函数中要求此文件

var helper = require('./helper');

，然后将此帮助程序与ejs渲染一起传递

res.render('index', { helper:helper });

使用的功能是ejs文件

<%= helper.common1() %>

就这样

Answer 3

似乎最简单的方法是将函数与所有呈现器的数据一起传递给对象：

在您的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);

在您的模板中：

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

Answer 4

您只需要一个单独的文件，并将app.locals设置为此

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

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

Answer 5

设置文件的顺序对于函数的定义方式很重要。执行是自上而下的，而不是文档评估上的。以下示例用于设置功能。</ p>

document.html

<section class="container">
    <%- include('./helpers/common') %>
    <%- include('./home') %>
</section>

common.ejs

<%
MyFunction = function() {
    // Write your code here
}
%>

home.ejs

<% if(MyFunction() ) { %>
    <!-- Write your HTML markup -->
<% }%>

Answer 6

在js文件中，创建一个函数实例，例如：如果函数名称为test ()，则Var ren = test ();将创建对此函数的引用。

在将数据呈现到ejs页面之前，将引用变量ren添加到该对象：

Data.ren = ren();

Res.render(Data)

现在在ejs中，当您调用<% ren() %>时，它将调用函数。

我应该在哪里定义要在EJS模板中调用的JS函数

6 个答案: