node.js ejs 模板，其数据表不将变量传递给 if 语句

问题描述 投票：0回答：1

大家晚上好，我知道这是使用较旧的堆栈；然而，在转移到具有更多功能的不同堆栈之前，这是我让某些东西正常工作的起点。

我有一个运行 ejs 模板的 Node.JS 应用程序，其中一个页面上有一个数据表，其中包含可显示的“子”行。这些子行中有几个按钮，其中一个按钮打开一个模型来显示一个表单，该表单将从 data.form_data 中的 JSON 对象填充。

我的模态 html 被通过以下方式拉入：

<%- include("../dataView/viewFullformModal") %>

我的所有数据都可以在“data”变量中找到。它正在渲染 data.formType、data.customer_name、data.dateReceived 等；但是，我需要包含另一个 ejs 文件，其中包含各种表单的特定布局。所以我认为最简单的方法是“if”或“switch”语句，这就是我遇到问题的地方：“data”变量可以访问 <% if statement.

我的if语句如下：

<% if ( data.formType === 'Schedule Consultation Form') { %>
    '<p> yes </p>' +
<% } else { %>
    console.log(data.formType) +
<% } %>

这将返回“未定义”；然而在此之前我有以下代码正在运行：

'formType: ' + formType + '</br>' +

这将返回：“formType：未定义”

并且，在这段代码之前，我有以下不起作用：

<% data.formType %>

这将返回：“NaN”

这是两个问题之一，但它是目前的主要问题。

这是我的主模板文件作为正文加载：dataTable.ejs

<div class="card">
    <div class="card-header">Submitted Form Data</div>
    <div class="card-body">
        <div class="table-responsive">
            <table id="customer_data" class="table table-bordered">
                <thead>
                    <tr>
                        <th></th>
                        <th>Date Received</th>
                        <th>Form Type</th>
                        <th>Customer Name</th>
                        <th>Email</th>
                        <th>Form Status</th>
                        <th>Reviewed By</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th></th>
                        <th>Date Received</th>
                        <th>Form Type</th>
                        <th>Customer Name</th>
                        <th>Email</th>
                        <th>Form Status</th>
                        <th>Reviewed By</th>
                    </tr>
                </tfoot>
                <tbody></tbody>
            </table>

        </div>
    </div>
</div>

<script>
    $(document).ready(function(){
        function format ( data ) {
            // `d` is the original data object for the row
            console.log ( data.form_data);
            console.log ( data.formType);
            let formType = data.formType;
            return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
                <%- include("../dataViews/childRowHeader") %>
                <%- include("../dataViews/childRowDetails") %>
                <%- include("../dataViews/childRowFormData") %>
                // include Modals
                <%- include("../dataViews/viewFullFormModal") %>
                <%- include("../dataViews/addNotesModal") %>
                <%- include("../dataViews/markReviewedNotesModal") %>

            '</table>';
        }

        //let dataTable = $('#customer_data').DataTable({
        let dataTable = new DataTable($('#customer_data'), {
            'processing' : true,
            'serverSide' : true,
            'serverMethod' : 'get',
            'ajax' : {
                'url' : '/get_data'
            },
            'aaSorting' : [],
            'columns' : [
                {
                    className: 'dt-control',
                    orderable: false,
                    data: null,
                    defaultContent: ''
                },
                { data : 'dateReceived' },
                { data : 'formType' },
                { data : 'customer_name' },
                { data : 'customer_email' },
                { data : 'form_status' },
                { data : 'reviewed_by' }
            ]
        });

        dataTable.on('click', 'td.dt-control', function (e) {
            let tr = e.target.closest('tr');
            let row = dataTable.row(tr);

            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
            }
            else {
                // Open this row
                row.child(format(row.data())).show();
            }
        });

    });

</script>
<script src='../../assets/scripts/modalScript.js' type="application/json">  </script>

这是包含的viewFullFormModal.ejs

'<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">'+
    '<div class="modal-dialog modal-dialog modal-xl" role="document">'+
        '<div class="modal-content">'+
            '<div class="modal-header">'+
                '<h5 class="modal-title" id="exampleModalLabel"><strong>' + data.formType + '</strong> submitted by: ' + data.customer_name + ' on ' + data.dateReceived + '</h5>'+
                '<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">'+
                    '<span aria-hidden="true">&times;</span>'+
                '</button>'+
            '</div>'+
            '<div class="modal-body">'+
                'formType: ' + data.formType + '</br>' +
                'formType: ' + formType + '</br>' +

                <% data.formType %> + '</br>' +
                <% if ( data.formType === 'Schedule Consultation Form') { %>
                    '<p> yes </p>' +
                <% } else { %>
                    '<br>' +
                    console.log(data.formType) +
                <% } %>

            '</div>' +
            '<div class="modal-footer">'+
                '<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>'+
                '</div>'+
            '</div>'+
        ' </div>'+
    '</div>'+
'</div>'+

我可以删除整个“if”语句并包含以下文件（scheduleConsultationFormLayout.ejs），它会正确返回数据：

'<p>' +
    'First Name: ' + data.form_data[4.3] + '</br>' +
    'Last Name: ' + data.form_data[4.6] +
'</p>' +
javascript node.js express if-statement ejs
1个回答
0
投票

遗憾的是，关于 EJS 的文档并不多，因此很难掌握它的某些方面。

关于你的问题，

formType
是
undefined
或
NaN
。

<% if ( data.formType === 'Schedule Consultation Form') { %>
    '<p> yes </p>' +
<% } else { %>
    console.log(data.formType) +
<% } %>

此代码片段中的问题出在 EJS 标签上。由于 

viewFullFormModal.ejs
本质上是一个 HTML 文件（正常情况），因此它不知道如何处理 
console.log(...)
。它既不在 EJS 标签内，也不在 
script
内，因此 HTML 解析器仅将其视为文本。这个问题可以通过删除排除
console.log(...)
的标签来解决，这样EJS解析器就可以运行
console.log(...)
。
注意：这将记录在服务器的控制台中，因为它仍然是服务器端渲染

<% if ( data.formType === 'Schedule Consultation Form') { %>
    '<p> yes </p>' +
<% } else {
    console.log(data.formType) +
} %>
其他两个案例也发生了类似的情况： 

'formType: ' + formType + '</br>' +

和以前一样，HTML解析器不知道

formType
，因此返回未定义，如果编写为

，这将起作用 
'formType: ' + <%= formType %> + '</br>' +

<% data.formType %>

有趣的是，可以在官方文档的几行文档中找到解决方案。

<%
是一个“scriplet”标签，这意味着它用于执行 if 语句、循环等。
<%=
是一个“输出”标签，意思是它是用来输出字符串的

因此，要输出 formType，您需要将其写为

<%= data.formType %>

我觉得你的做法很奇怪，那就是

viewFullFormModal.ejs
。为什么每一行都用撇号括起来？您可以像往常一样编写 ejs 文件，然后，当您包含该文件时，使用 
<%-
它将以字符串形式返回输出。在大多数（如果不是全部）IDE 中，即使它有效，这也会被标记为错误。要消除该错误，只需将整个 EJS 部分包装在字符串分隔符中，即 
"
引号、
'
撇号或 
`
gravis。我更喜欢 gravis，因为引号和撇号已经可能在文件内使用，所以它会弄乱字符串的分隔符。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.