Question

我有此文件来添加新的Ship，并且用于填充舰队下拉菜单的脚本可以正常工作：

new.ejs文件：

<% include ../partials/header %>

<div class="container">
    <div class="row">
        <h1 style="text-align: center;">Create a new Ship</h1>
        <div style="width: 30%; margin: 25px auto;">
            <form action="/ships" method="POST">
                <div class="form-group">
                    <input class="form-control" type="text" name="name" placeholder="name">
                </div>
                <div class="form-group">
                    <input class="form-control" type="number" name="tons" placeholder="tons" min="0" step="1">
                </div>
                <div class="form-group">
                    <input class="form-control" type="text" name="image" placeholder="img url">
                </div>
                <!--<div class="form-group">-->
                <!--    <input class="form-control" type="text" name="fleet" placeholder="fleet">-->
                <!--</div>-->

                <div class="form-group">
                    <select class="form-control" type="text" name="fleet" id="selectNumber" placeholder="fleet">
                        <option>Choose a fleet</option>
                    </select>
                </div>

                <script>
                    var select = document.getElementById("selectNumber");
                    var options = ["First fleet", "Second fleet", "Metropolitan fleet", "Support fleet"];
                    for(var i = 0; i < options.length; i++) {
                        var opt = options[i];
                        var el = document.createElement("option");
                        el.textContent = opt;
                        el.value = opt;
                        select.appendChild(el);
                    }
                </script>




                <div class="form-group">
                    <input class="form-control" type="text" name="description" placeholder="description">
                </div>
                <div class="form-group">
                    <button class="btn btn-lg btn-primary btn-block">Submit!</button>
                </div>
            </form>
            <a href="/ships/">Back</a>
        </div>
    </div>

</div>


<% include ../partials/footer %>

我想从视图中分离“逻辑”，所以我需要创建一个文件： ../ public / js / jsscripts.js

我想在jsscripts.js里面

module.exports = {
  PopulateFleet: function () {
var select = document.getElementById("selectNumber");
                    var options = ["First fleet", "Second fleet", "Metropolitan fleet", "Support fleet"];
                    for(var i = 0; i < options.length; i++) {
                        var opt = options[i];
                        var el = document.createElement("option");
                        el.textContent = opt;
                        el.value = opt;
                        select.appendChild(el);
                    }

};

1）我需要从我的app.js中要求文件“ jsscripts”吗？ 像这样：

jscripts= require ("./public/js/jscripts");

2）如何从new.ejs文件中调用函数“ PopulateFleet”？ 像吗？

<% PopulateFleet %>

或

<% jscripts.PopulateFleet %>

文件夹结构

车队-公共-js-> jsscripts.js

舰队-视图-船只-> -new.ejs

Answer 1

我遇到了同样的问题，并且找到了解决方案。因此，我知道此解决方案不是理想的解决方案，但可以使用。

我有一个函数文件“ my_functions.js”，其代码如下：

var processSomething = function(variableXXXX)
{
    ...
    ...
    return(variableNew)
}

module.exports.processSomething     = processSomething;

我需要将此文件放入“ application.js”中：

var myFonctions = require('./include/my_fonctions.js');

然后我将此变量传递给我的EJS

res.render('view.ejs',{myFonctionsForEjs:myFonctions});

而且，在我的EJS文件中，我可以做到

var response = myFonctionsForEjs.processSomething(1234);

Answer 2

use <%= jscripts.PopulateFleet() %>

如何从ejs模板调用外部文件的javascript函数？

2 个答案: