14

我想要的是这样的：

app.js（为简洁起见排除了节点进程，包括等，但使用 ejs 作为渲染引擎）：

app.get('/', function(req, res){

    var ejsVariables = {
        title : 'ideal ejs function example',
        listData1 : {
            listTitle : 'my list',
            listItems : [
                { name : 'first item', class : 'foo' },
                { name : 'second item', class : 'bar' },
                { name : 'last item', class : 'foo' }                ]
        },
        listData2 : {
            listTitle : 'your list',
            listItems : [
                { name : 'a widget', class : 'foo' },
                { name : 'another widget', class : 'baz' }
            ]
        }
    };

    res.render('index', ejsVariables);
});

index.ejs：

<html>
    <head>
        <title><%= title %></title>
    </head>
    <body>
        <h1><%= title %></h1>

        <% makeList(listData1) %>

        <p>lorem ipsum</p>

        <% makeList(listData1) %>
    </body>
</html>

？？？

结果：

<html>
    <head>
        <title>ideal ejs function example</title>
    </head>
    <body>
        <h1>ideal ejs function example</h1>

        <ul>
            <li class="foo">first item</li>
            <li class="bar">second item</li>
            <li class="foo">another item</li>
        </ul>

        <p>lorem ipsum</p>

        <ul>
            <li class="foo">a widget</li>
            <li class="baz">another widget</li>
        </ul>
    </body>
</html>

问题：里面有什么？？？部分和/或应该在上面更改？

到目前为止我尝试过的

尝试 1

- 我真的希望这个工作，它只是没有

索引.ejs

<html>
    <head>
        <title><%= title %></title>
    </head>
    <body>
        <h1><%= title %></h1>
        <% var makeList; %>
        <!-- this variable is declared here as those declared within the include are not
        accessible from the file from which it is called, I'm guessing some sort of 
        function scope is coming into play here -->

        <% include makeList %>

        <% makeList(listData1) %>

        <p>lorem ipsum</p>

        <% makeList(ListData2) %>
    </body>
</html>

makeList.ejs

<% function makeListItem(itemData){ %>
        <li class="<%= itemData.class %>" ><%= itemData.name %></li>
<% } %>

<% makeList = function(data){ %>
    <% if(data){ %>
        <ul>
            <% data.map(makeListItem) %>
        </ul>
    <% } %>
<% } %>

在这种情况下，两者makeListItem都makeList被调用，似乎由于范围或其他原因，当它们被调用时，它们无法实际输出到模板。

尝试 2

- 这确实有效，我只是不喜欢我最终使用包含而不是某种函数调用的方式。

索引.ejs

<html>
    <head>
        <title><%= title %></title>
    </head>
    <body>
        <h1><%= title %></h1>

        <% var data = listData1 %>
        <% include makeList %>

        <p>lorem ipsum</p>

        <% var data = listData2 %>
        <% include makeList %>
    </body>
</html>

makeList.ejs

<% function makeListItem(itemData){ %>
        <li class="<%= itemData.class %>" ><%= itemData.name %></li>
<% } %>

<% if(data){ %>
    <ul>
        <% data.map(makeListItem) %>
    </ul>
<% } %>

尝试 3

- 这基本上涉及搞乱ejs-locals，但是我发现功能有些缺乏。

如果我要在我的应用程序中包含另一个 npm 模块，我真的希望它是一个更完整的解决方案，但即使在理想的世界中，我也宁愿不这样做并自己编写它。

为这篇文章的长度道歉，它很快就失控了。如果你能走到这一步，我会表扬你。

任何投入将不胜感激。

4

2 回答 2

31

这个怎么样： 

// app.js
var ejs = require('ejs');
var fs  = require('fs');

app.locals({
  makeList  : function(list) {
    var template = fs.readFileSync('makeList.ejs', 'utf-8');
    return ejs.render(template, list);
  }
});

// index.ejs
<%- makeList(listData1) %>
  ^ important!

// makeList.ejs
<ul>
  <% listItems.forEach(function(item) { %>
    <li class="<%= item.class %>"><%= item.name %></li>
  <% }); %>
</ul>
于 2013-04-15T06:40:49.413 回答
0

我唯一能想到的（至少对于第一个例子）是 makeList() 函数从 ejsVariables 中删除 listData1，你能告诉我这个例子的 makeList() 吗？

在尝试 1 中，您在没有参数的情况下调用 makeList() ！

于 2013-04-15T05:30:17.800 回答