【问题标题】:Node.js - EJS - including a partialNode.js - EJS - 包括部分
【发布时间】:2011-07-21 06:17:21
【问题描述】:

我正在尝试为节点使用嵌入式 Javascript 渲染器: https://github.com/visionmedia/ejs

我想知道如何在 .ejs 视图文件中包含另一个视图文件(部分)。

【问题讨论】:

  • 部分系统实际上是ExpressJS的一部分,我相信。你在使用 Express 框架吗?
  • 不,我没有使用它。如果仅使用模板引擎不可能的话,我可能不得不走这条路。

标签: node.js ejs


【解决方案1】:

使用 Express 3.0:

<%- include myview.ejs %>

路径是相对于包含该文件的调用者的路径,而不是来自使用app.set("views", "path/to/views") 设置的视图目录。

EJS v1 includes
EJS v2 includes

(更新:ejs v3.0.1 的最新语法是&lt;%- include('myview.ejs') %&gt;

【讨论】:

  • 这应该是正确答案,因为ejs/express的开发者更新了代码。
  • 在 ejs2 中,我的代码看起来像这样并且可以正常工作。 在 ejs3 中它需要看起来像这样 猜猜我花了多少小时才意识到我必须在开头添加破折号? (只需添加此评论,以防处于相同情况的其他人阅读它。)
  • &lt;%- include('partials/footer') %&gt; 也可以
  • 非常感谢您更新最新语法
  • 现在正确的链接应该是:github.com/mde/ejs#includes
【解决方案2】:

适用于 Express 4.x:

根据this在模板中包含部分的正确方法你应该使用:

&lt;%- include('partials/youFileName.ejs') %&gt;

您正在使用:

&lt;% include partials/yourFileName.ejs %&gt;

已弃用。

【讨论】:

    【解决方案3】:

    在 Express 4.x 中我使用以下内容加载ejs

      var path = require('path');
    
      // Set the default templating engine to ejs
      app.set('view engine', 'ejs');
      app.set('views', path.join(__dirname, 'views'));
    
      // The views/index.ejs exists in the app directory
      app.get('/hello', function (req, res) {
        res.render('index', {title: 'title'});
      });
    

    那么你只需要两个文件就可以了——views/index.ejs:

    <%- include partials/navigation.ejs %>
    

    还有views/partials/navigation.ejs

    <ul><li class="active">...</li>...</ul>
    

    您也可以告诉 Express 使用 ejs 来作为 html 模板:

    var path = require('path');
    var EJS  = require('ejs');
    
    app.engine('html', EJS.renderFile);
    
    // Set the default templating engine to ejs
    app.set('view engine', 'ejs');
    app.set('views', path.join(__dirname, 'views'));
    
    // The views/index.html exists in the app directory
    app.get('/hello', function (req, res) {
      res.render('index.html', {title: 'title'});
    });
    

    最后你也可以使用ejs布局模块:

    var EJSLayout = require('express-ejs-layouts');
    app.use(EJSLayout);
    

    这将使用views/layout.ejs 作为您的布局。

    【讨论】:

    • 我丢失了)错误,我必须把它写成
    【解决方案4】:

    从 Express 4.x 开始

    app.js

    // above is all your node requires
    
    // view engine setup
    app.set('views', path.join(__dirname, 'views')); <-- ./views has all your .ejs files
    app.set('view engine', 'ejs');
    

    error.ejs

    <!-- because ejs knows your root directory for views, you can navigate to the ./base directory and select the header.ejs file and include it -->
    
    <% include ./base/header %> 
    <h1> Other mark up here </h1>
    <% include ./base/footer %>
    

    【讨论】:

      【解决方案5】:

      Express 3.x 不再支持部分。根据ejs 'partial is not defined'的帖子,您可以在EJS中使用“include”关键字来替换已删除的部分功能。

      【讨论】:

      • 查看 ejs-locals 以获得 express 3 支持。
      【解决方案6】:

      app.js 添加

      app.set('view engine','ejs')
      

      在视图/部分中添加您的部分文件(ejs)

      index.ejs

      <%- include('partials/header.ejs') %>
      

      【讨论】:

        【解决方案7】:

        在官方文档https://github.com/mde/ejs#includes 中显示包括这样的作品:

        <%- include('../partials/head') %>
        

        【讨论】:

          【解决方案8】:

          还有

          <%- include('partials/header.ejs',{paramName: paramValue}) %>
          

          【讨论】:

            【解决方案9】:

                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
            
             <form method="post" class="mt-3">
                    <div class="form-group col-md-4">
                      <input type="text" class="form-control form-control-lg" id="plantName" name="plantName" placeholder="plantName">
                    </div>
                    <div class="form-group col-md-4">
                      <input type="text" class="form-control form-control-lg" id="price" name="price" placeholder="price">
                    </div>
                    <div class="form-group col-md-4">
                        <input type="text" class="form-control form-control-lg" id="harvestTime" name="harvestTime" placeholder="time to harvest">
                      </div>
                    <button type="submit" class="btn btn-primary btn-lg col-md-4">Submit</button>
                  </form>
            
            <form method="post">
                    <table class="table table-striped table-responsive-md">
                        <thead>
                        <tr>
                            <th scope="col">Id</th>
                            <th scope="col">FarmName</th>
                            <th scope="col">Player Name</th>
                            <th scope="col">Birthday Date</th>
                            <th scope="col">Money</th>
                            <th scope="col">Day Played</th>
                            <th scope="col">Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        <%for (let i = 0; i < farms.length; i++) {%>
                             <tr>
                                <td><%= farms[i]['id'] %></td>
                                <td><%= farms[i]['farmName'] %></td>
                                <td><%= farms[i]['playerName'] %></td>
                                <td><%= farms[i]['birthDayDate'] %></td>
                                <td><%= farms[i]['money'] %></td>
                                <td><%= farms[i]['dayPlayed'] %></td>
                                <td><a href="<%=`/farms/${farms[i]['id']}`%>">Look at Farm</a></td>
                            </tr>
                        <%}%>
                    </table>
                </form>

            【讨论】:

            • 欢迎来到印度尼西亚 Enividu 的 Stack Overflow。请考虑在您的答案中添加更多详细信息,而不仅仅是代码。
            【解决方案10】:

            对于包含 ejs 文件,您必须使用:

            <%- include("file-name") %>
            

            注意:文件名中不需要使用.ejs

            【讨论】:

              【解决方案11】:

              对于包含 ejs 文件,您必须使用:

              &lt;%- include("relative path of ejs ") -%&gt;

              【讨论】:

                【解决方案12】:

                EJS 本身目前不允许视图部分。快递可以。

                【讨论】:

                • 过时的信息。根据@pkyeck 的评论,新版本支持它
                猜你喜欢
                • 1970-01-01
                • 2012-08-02
                • 1970-01-01
                • 2012-11-12
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                相关资源
                最近更新 更多