Question

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

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

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

userHome.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>

这里是chooseImportTeamOrManualCreate.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");
    }
};

*尝试注入＆lt;％= user._id％＆gt;进入chooseImportTeamOrManualCreate（）让我觉得有点傻，因为我知道这可能是荒谬的错误。

如何将user_id传递给chooseImportTeamOrManualCreate（）然后一旦我在chooseImportTeamOrManualCreate（）中，我该如何访问变量？也许用户变量附加到文档/窗口DOM对象？

Answer 1

以某种方式了解如何将其呈现在页面中：

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

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

现在想：

String如何通常由模板处理程序在页面中呈现？
带引号或不带引号？

你回答without quotes了吗？希望你做到了。为什么这很重要？

然后，表单将调用

chooseImportTeamOrManualCreate(lk45jqlk43jakljf)

看起来不错吗？可能？

如果lk45jqlk43jakljf是变量名称。但事实并非如此。您要将文字值分配给形式参数user_id，因此它需要在括号内引用，例如 'lk45jqlk43jakljf'。当有提交时，您需要此电话，并带引号：

chooseImportTeamOrManualCreate('lk45jqlk43jakljf')

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

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

所以无论user._id是什么，它都会在呈现到表单中时得到引号。

有时候有人会用一些只需要工作的糟糕代码来帮助你，并且没有时间分配给它正确地重构它。不过，像这样的代码似乎已经成熟，可用于扩展重构项目。这里有两件事是“坏代码味道”：

在HTML中设置事件处理程序或在HTML中设置模板。相反，使用JS或jQuery。例如，请参阅作者写的these jQuery coding standards, under Events #5：

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

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

不要使用jQuery？精细。在普通Javascript中设置事件仍然比在HTML字符串中设置元素的onSomething属性更好，原因相同。

下一个工作的人，可能是你，需要做更多的搜索才能找到相关的代码和他们做的事情，观察多个格式规则等等......当问题消失时代码更多地面向普通实践。

将Javascript变量数据嵌入HTML或成为HTML的模板中。这实际上只是重复上述相同的问题。

Node.js Express：重新访问注入.html文件的变量

1 个答案: