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

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 中定义所有这些函数。是否有其他地方可以定义这些函数并以与我现在一样的方式在模板中调用它们？如果是，定义它们的方式是什么，以便它们像现在一样可以访问。

我对 Node、Express 和 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 render 传递这个助手

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

并且使用你的函数是ejs文件

<%= helper.common1() %>

就是这样

Answer 3

嗯，由于某种原因，接受的答案对我来说并不奏效。此外，为每个函数创建一个单独的 *.ejs

文件，然后在视图中导入该文件也是没有意义的 - 特别是当我要实现非常简单的逻辑时。

事实上定义函数并在视图中使用它非常简单和容易

我这样做了：

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

它有效！

谢谢

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

似乎最简单的方法是将附加到对象的函数与渲染的所有数据一起传递：

在你的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 6

设置文件的顺序对于如何定义函数很重要。执行是自上而下的，而不是基于文档评估。下面的示例来设置您的功能。

文档.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 7

我有两种解决方案，可能并不适合所有人。 #1. “抓起就跑”的方法

在

main.ejs

的顶部写下以下结构

<% const helpers = {}; include('./helpers', { helpers }); %> 在

helpers.ejs

内写下以下内容：

<%

Object.assign(h, {
  lower(arg) { return String(arg).toLowerCase() },
  upper(arg) { return String(arg).toUpperCase() },
  // some other helpers here

})

%>

现在在main.ejs中我们可以使用这些函数了

<h1><%= helpers.upper('your text here') %></h1> 2.世界变异法

这与前面的方法类似，但不是改变本地

helpers

 变量，而是在 helpers.ejs 文件内传递来自父上下文的“variable_object”，并补充了必要的变量。

这就是它的样子：

在

main.ejs

顶部写下以下内容：

<% include('./helpers', { locals }); %> 在helpers.ejs中

Object.assign(locals, {
  lower(arg) { return String(arg).toLowerCase() },
  upper(arg) { return String(arg).toUpperCase() },
  // some other helpers here
});

现在在 main.ejs 中

<%= upper('lololo') %> 祝你好运！

Answer 8

在 js 文件中，创建函数的实例，例如：如果您的函数名称是

test ()

，

Var ren = test ();

 将创建对此函数的引用。

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

Data.ren = ren();

Res.render(Data)

现在在 ejs 中，当你调用

<% ren() %>

 时，它会调用该函数。