web-dev-qa-db-ja.com

EJSテンプレートで呼び出すJS関数をどこに定義すればよいですか

私はテンプレートに取り組んでいますが、エクスプレスと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に慣れていないので、さまざまなテクニックがわかりません。誰かがそれに光を当てることができれば、それは素晴らしいでしょう。前もって感謝します。

node.jsexpressejs
11
Newbie Programmer

同じ問題を解決しながらこの質問に終わる可能性のある人のために、この回答をここに投稿してください。

あなたがしなければならないのは、新しいファイル（たとえば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) %>" />

そして、あなたはすべて設定されています。これが誰かを助けることを願っています。

34
Newbie Programmer

まあ、何らかの理由で、受け入れられた答えは私にとってうまくいかなかった。また、関数ごとに別の*.ejsファイルを作成し、そのファイルをビューにインポートすることは意味がありません。特に、実装する非常に単純なロジックがある場合はそうです。

実際、関数を定義してビューで使用するのは非常にシンプルで簡単です

これは私がしました：

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

そしてそれはうまくいきます！

ありがとう

8
Siddhartha Chowdhury

別のファイルを要求し、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}
4
Rik

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() %>

それでおしまい

3
Faaiq

これを行う最も簡単な方法は、レンダリング用のすべてのデータとともにオブジェクトにアタッチされた関数を渡すことです：

あなたの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" >
2
Adam Murphy

ファイルを設定する順序は、関数の定義方法に重要です。実行は、ドキュメントの評価ではなく、上から下に実行されます。関数を設定するための以下の例。

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 -->
<% }%>
0
Rick