访问 EJS 中的变量

Question

我想使用从 map.js 传递到 map.ejs 的对象。在我的请求中，我获取了对象：

module.exports = async function(req, res) {
    var myObjects = await new Promise(resolve => {
        // resolve with objects
    });

    res.view('pages/map/home', {
        myObjects
    })
};

如何访问我的 .ejs 文件中的对象？我想遍历它们以将它们添加到地图上，但是，这不会打印任何内容。它实际上会在页面上产生错误。 map.ejs

的一部分

<div id="mapid"></div>
<script>
// set up map
var mymap = L.map('mapid').setView([45.4735629, 9.1771209], 13);
// ...
// add markers on map using fetched objects
var myObjects = <%- myObjects %>
myObjects.forEach(f => {
    var marker = L.marker([f.latitude, f.longitude]).addTo(mymap); 
}
</script>

我在 .ejs 中的 myObjects 上得到 Unexpected identifier。关于我做错了什么的任何提示？

Answer 1

留给你 map 路由来渲染视图 map.ejs
这会将 HTML 发送到客户端。

因此您查看路线可能如下所示：

router.get('/', (req, res) => {
    res.send('home', {})
});

为 return 个地图点添加 route，例如[site]/maps/getMapPoints/:location

从该路线简单地用 JSON 回复。

这是一个 API Route

的例子

/* GET home page. */
router.get('/', (req, res) => {
  geoLocate(req.ip).then(json => {
    res.json(json);
  }).catch(err => console.log(err));
});

现在，在您 map.ejs 呈现的客户端 HTML 中，您需要使用它。我们将使用这个 REST Test Site

// When the DOM has loaded.
document.addEventListener('DOMContentLoaded', () => {
  fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(res => res.json())
  .then(json => {
    // Lets build out the HTML
    document.querySelector('.container').innerHTML = `
      <div id="${json.id}"><h3>${json.title} - ${(json.completed) ? 'Complete' : 'Pending'}</h3></div>
    `;
  });
});

<div class="container">

</div>

最后是一个分离的工作示例：Sample Site

访问 EJS 中的变量

Access to variables inside EJS

javascript

ejs

sails.js