node.js - 在初始页面加载时引导数据

Question

Lynda.com 的教程中使用了以下代码(server.js 和 app.js)，用于在 Backbone 和 Node.js Web 应用程序中引导数据。通过对根文件夹 app.get('/') 的 get 请求，您可以看到它正在对从 json 文件导出的项目调用 JSON.stringify (所以它没有使用数据库作为示例)。前端文件 app.js 似乎在 data 项上调用 app.menuItems.reset({{{ data }}})由 Node 提供服务。

我对此有一个问题，教程中没有解释

1) 如果 Node 通过初始 get 请求提供 data，为什么还需要调用 app.menuItems.reset({{ {数据}}})？ get 请求是否已完成向前端提供数据所需的一切操作？

如果您需要查看更多代码，请告诉我。我认为这个问题可以通过有关引导的通用知识来回答，而无需查看例如 app.menuItems。

server.js

items = require('./data/menu-items');  //static json file

var app = express()
  .use(express.bodyParser())
  .use(express.static('public'));

app.get('/', function (req, res) {
  res.render('index.hbs', {data: JSON.stringify(items)});
});

app.js

<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript">
        app.menuItems.reset({{{data}}});
</script>

Answer 1

向服务器调用 GET/ 确实会返回浏览器处理请求所需的所有信息，但主干集合不知道数据在页面中，直到您调用 使用数据重置。

试试这个:

将 app.js (我认为实际上是您的 hbs 文件？)更改为:

<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript">
        var myData = {{{data}}};
</script>

你会发现什么也没有发生。

这是因为应用程序的主干部分(app.js)仅在客户端上运行。因此， app.menutItems.reset() 调用的作用是告诉浏览器，当加载 app.js 时(以便 app.menuItems 可用)，使用服务器上的数据重置集合。

reset 是一个主干方法，它会导致集合清空它可能拥有的任何数据，并将传入的数据作为它自己的数据加载。因此，这将从 data 中的所有项目创建模型，然后将所有这些模型附加到集合中。

我猜有类似 this.listenTo(app.menuItems, 'reset', func...) 或 this.on('reset', func... ) 位于 app.js 代码中，这会导致应用程序在将数据加载到集合中时实际执行某些操作。