[英]How to call javascript functions of external files from ejs template?
I have this file to add a new Ship and the script to populate de fleet dropdown menu works fine:我有这个文件来添加一个新的 Ship 和脚本来填充 de 舰队下拉菜单工作正常:
new.ejs file:新建.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 %>
I want to separate the "logic" from the view, so I need to create a file: ../public/js/jsscripts.js我想从视图中分离“逻辑”,所以我需要创建一个文件: ../public/js/jsscripts.js
and I guess inside the 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) Do I need to require the file "jsscripts" from my app.js ? 1)我需要从我的 app.js 中获取文件“jsscripts”吗? Something like:就像是:
jscripts= require ("./public/js/jscripts");
2) How to call the function "PopulateFleet" from the new.ejs file? 2) 如何从new.ejs 文件中调用函数“PopulateFleet”? something like??就像是??
<% PopulateFleet %>
or或者
<% jscripts.PopulateFleet %>
Folder structure文件夹结构
Fleet - public - js -> jsscripts.js舰队 - 公共 - js -> jsscripts.js
Fleet - views - ships -> - new.ejs舰队-视图-船舶-> -new.ejs
use <%= jscripts.PopulateFleet() %>
I have the same issue and I find a solution.我有同样的问题,我找到了解决方案。 So I know this solution is not the ideal solution but it's works.所以我知道这个解决方案不是理想的解决方案,但它是有效的。
I have a function's file "my_functions.js" with code like that :我有一个函数文件“my_functions.js”,代码如下:
var processSomething = function(variableXXXX)
{
...
...
return(variableNew)
}
module.exports.processSomething = processSomething;
I require this file into "application.js" like that :我需要这个文件到“application.js”中:
var myFonctions = require('./include/my_fonctions.js');
And I pass this variable to my EJS like that我像这样将这个变量传递给我的 EJS
res.render('view.ejs',{myFonctionsForEjs:myFonctions});
And, in my EJS File I can do that而且,在我的 EJS 文件中,我可以做到
var response = myFonctionsForEjs.processSomething(1234);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.