在初始页面加载时引导数据

时间:2014-01-14 18:27:12

标签: node.js backbone.js

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

我对此有疑问,教程

没有解释

1)如果节点正在为data提供初始get请求,为什么还需要调用app.menuItems.reset({{{ data }}}) ?. get请求是否执行了向前端提供数据所需的所有操作?

如果您需要查看更多代码,请与我们联系。我认为这个问题可以通过关于bootstrapping的一般知识来回答,而不需要看到例如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>

1 个答案:

答案 0 :(得分:1)

向服务器调用GET /确实返回了浏览器处理请求所需的所有信息,但是在您使用reset调用<script type="text/javascript" src="js/app.js"></script> <script type="text/javascript"> var myData = {{{data}}}; </script> 之前,主干集合不知道数据是否在页面中数据。

试试这个:

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

app.js

你会发现没有任何事情发生。

这是因为应用程序的主干部分(app.menutItems.reset())仅在客户端上运行。那么app.menuItems调用正在做的是告诉浏览器何时加载app.js(以便reset可用),使用来自服务器的数据向reset集合。< / p>

data是一种骨干方法,它使集合清空它可能拥有的任何数据并加载传入的数据作为它自己的数据。因此,这将在this.listenTo(app.menuItems, 'reset', func...)中的所有项目中创建模型,然后将所有这些模型附加到集合中。

我猜你的this.on('reset', func...)代码中某处有app.js或{{1}},这会导致应用程序在将数据加载到集合中时实际执行某些操作。< / p>