Node.js Express:重新访问注入到文件中.html变量

Node.js Express: re-accessing variables injected into .html file

本文关键字：注入 文件 变量 html 访问 Express js 新访问 Node      更新时间：2023-09-26

我正在使用node.js/express和EJS（嵌入式javascript）。

我将一些变量注入到这样的.html页面中

res.render('userHome.html', {
                user : user,
                teams : teams,
                user_db_name : user_db_name
            });

用户首页.html内容：

<html>
<head>
    <title>SASC Sparks Lineup Generator</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"</script>
    <script type="text/javascript" src="/fancy_scripts/userHomeController.js"></script>
</head>
<body>
<form  onsubmit="chooseImportTeamOrManualCreate(<%=user._id%>)" id="page1">
        <!-- <input id="createNewTeam" type="submit" value="Create New Team"/> -->
        <button type="submit" value="Create New Team" id="createNewTeamButton">Create New Team</button>
</form>
</body>
</html>

这是选择导入团队或手动创建.js文件内容

$( document ).ready(function() {});

function chooseImportTeamOrManualCreate(user_id){
      //I want user_id to be passed into this method, but this does not work
    console.log($.document);
    if (window.confirm("Do you wish to import team data from an existing roster?")) { 
        window.location.replace("/users/" + user_id + "/importNewTeamRoster", "Importing new roster");
//        window.open("/users/" + user_id + "/importNewTeamRoster", "Importing new roster");
        }
    else{
        window.location.replace("/users/" + user_id + "/importNewTeamRoster", "Importing new roster");
    }
};

*试图将 <%=user._id%> 注入 chooseImportTeamOrManualCreate（） 让我觉得有点傻，因为我知道这可能是荒谬的错误。

如何获取要传递给 chooseImportTeam或ManualCreate（） 的user_id，然后一旦我进入 chooseImportTeamOrManualCreate（） 如何访问变量？也许用户变量附加到文档/窗口 DOM 对象？

以某种方式找出它是如何呈现到页面中的：

<form onsubmit="chooseImportTeamOrManualCreate(<%=user._id%>)" id="page1">

假设<%=user._id%>是一个包含"lk45jqlk43jakljf"的字符串，它是特定用户的数据库键。

现在想想：

  • 模板处理程序通常如何在页面中呈现字符串？
    • 带引
  • 号还是不带引号？

你回答时没有引号吗？ 希望你做到了。 为什么这很重要？

好吧，然后表单将调用 

chooseImportTeamOrManualCreate(lk45jqlk43jakljf)

这看起来还行吗？或？

如果lk45jqlk43jakljf是一个变量名。 但是，事实并非如此。 它是您要分配给形式参数user_id的文本值，因此它需要在括号内使用引号，例如 'lk45jqlk43jakljf' . 当有提交时，您需要此调用，并带有引号：

chooseImportTeamOrManualCreate('lk45jqlk43jakljf')

由于正在渲染的行已经使用了双引号，因此我们必须在此处使用单引号，如下所示：

<form onsubmit="chooseImportTeamOrManualCreate('<%=user._id%>')" id="page1">

因此，无论user._id是什么，当它呈现到表单中时，它都会得到引号。

有时有人会用糟糕的代码粘住你，这些代码只需要工作，并且没有时间分配时间来正确重构它。 尽管如此，像这样的代码似乎已经成熟，可以进行扩展重构项目。这里有两件事是"糟糕的代码气味"：

  1. 在 HTML 或成为 HTML 的模板中设置事件处理程序。 相反，请使用JS或jQuery。 例如，请参阅这些jQuery编码标准，在事件#5下，作者写道：

不要在 HTML 中使用行为标记（JavaScript 内联），这些都是调试的噩梦。> 始终将事件与 jQuery 绑定以保持一致，以便更轻松地动态>附加和删除事件。

<a id="myLink" href="#" onclick="myEventHandler();">my link</a> <!-- BAD -->

不使用jQuery？好。 出于同样的原因，在纯 Javascript 中设置事件仍然比在 HTML 字符串中设置元素的 onSomething 属性更好。

下一个处理它的人，可能是你，必须做更多的搜索来找到相关的代码位和它们的作用，遵守多个格式规则等......当代码结构更倾向于常见实践时，这些问题就会消失。

  1. 将 Javascript 变量数据嵌入到 HTML 或成为 HTML 的模板中。 这实际上只是重复与上述相同的问题。
相关文章：