访问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', {})
});

为返回地图点添加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));
});

现在在您HTML渲染的客户端map.ejs中，您将需要使用此内容。我们将使用此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