node.js javascript var 可在 res.render() 的目标中使用

发布于 2024-11-15 05:52:27 字数 561 浏览 1 评论 0原文

我正在尝试使客户端 JavaScript 可以访问一个变量（最终被从数据库中选择的更复杂的 json 替换）。我想在页面渲染时加载它而不是 ajax 调用，并且它不会通过像 ejs 这样的模板渲染（我想将数据传递到组合框的 extjs 存储）。所以我有一个标准的响应我渲染：

function (req, res) {
  res.render('index.html', {foo: ['a','b']});
}

和一个空白的html页面我想访问foo：

<!DOCTYPE html>
<html>
<head>
<script type=text/javascript>
console.log(foo);
</script>
</head>
<body>
</body>
</html>

有什么想法吗？我想过也许可以通过 res.send() 编写整个 html 页面（它比上面的示例多了一些内容），但这似乎是一种解决方法，可以明显地做到这一点......

原文

I'm trying to make a variable (eventually to be replaced by more complex json selected from the database) accessible to client-side javascript. I wanted to load it when the page is rendered instead of an ajax call and its not going to be rendered via a template like ejs (I want to pass the data to an extjs store for a combobox). So I have a standart response I render:

function (req, res) {
  res.render('index.html', {foo: ['a','b']});
}

and a blank html page I want to access foo:

<!DOCTYPE html>
<html>
<head>
<script type=text/javascript>
console.log(foo);
</script>
</head>
<body>
</body>
</html>

any ideas? I've thought of maybe writing the whole html page via res.send() (which has a few more things than the example above) but that seems like such a workaround for something that should be obvious to do...

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

<逆流佳人身旁 2024-11-22 05:52:27

假设上面的问题中有相同的数组 foo ，这里有几种方法可以做到这一点。

这个使用 EJS 过滤器来编写数组文字：

<script type="text/javascript">
var foo = ['<%=: foo | join:"', '" %>'];
</script>

这个将其编码为 JSON，稍后由客户端 javascript 进行解析：

<script type="text/javascript">
// note the "-" instead of "=" on the opening tag; it avoids escaping HTML entities
var fooJSON = '<%-JSON.stringify(foo)%>';
</script>

IIRC，ExtJS 可以直接将 JSON 作为其数据处理。如果没有，那么你可以先使用它的 JSON 解析器，然后给它一个局部变量。如果您没有使用 ExtJS，您可以使用它在客户端上解析： https://github.com /douglascrockford/JSON-js

如果您选择将其编码为 JSON，那么以后切换回 AJAX 来检索数据也会变得更容易。在某些情况下，这会有优势。该页面可以加载并显示一些数据，以及正在为其加载数据的元素上方的忙碌图标。

这并不是说将所有数据包含在原始请求中存在本质上的错误。只是坚持使用 JSON 可以让您以后灵活选择。

Assuming the same array foo in your question above, here are a couple ways you could do this.

This one uses an EJS filter to write an array literal:

<script type="text/javascript">
var foo = ['<%=: foo | join:"', '" %>'];
</script>

This one encodes it as JSON, to later be parsed by your client-side javascript:

<script type="text/javascript">
// note the "-" instead of "=" on the opening tag; it avoids escaping HTML entities
var fooJSON = '<%-JSON.stringify(foo)%>';
</script>

IIRC, ExtJS can handle JSON directly as its data. If not, then you could use its JSON parser first and then hand it a local variable. If you weren't using ExtJS, you could use this to parse on the client: https://github.com/douglascrockford/JSON-js

If you choose to encode it as JSON, it would make it also make it easier to later switch back to AJAX for retrieving your data. In some cases, that would have an advantage. The page could load and display some data, along with a busy icon over the element for which you're loading data.

This isn't to say there's anything inherently wrong with including all the data in the original request. It's just that sticking with JSON gives you the flexibility to choose later.

回复收藏 0 原文

原谅我要高飞 2024-11-22 05:52:27

在 EJS 中，以下内容应该可以工作，

<script type=text/javascript>
  console.log( <%= foo %>);
</script>

但我建议不要动态生成 JavaScript，因为它会破坏关注点分离并强制 JavaScript 运行。

编辑：

事实证明，上面的方法对于数组来说效果不佳。因此，只需将数据编码为语义 HTML 即可。然后使用 JavaScript增强它。如果 JavaScript 必须获取数据，则将其存储在更合理的地方（例如 cookie）或通过 ajax 检索它。

In EJS the following should work

<script type=text/javascript>
  console.log( <%= foo %>);
</script>

I do recommend against dynamically generating JavaScript though as it breaks seperation of concerns and forces JavaScript to be on.

Edit:

Turns out the above doesn't work nicely for arrays. So simply encode your data in semantic HTML. Then enhance it with JavaScript. If the JavaScript must get data then store it somewhere more sensible like the cookie or retrieve it through ajax.

回复收藏 0 原文

~没有更多了~