在初始頁面加載時引導數據

Question

Lynda.com的教程中使用以下代碼（ server.js和app.js ）在Backbone和Node.js Web應用程序中引導數據。 通過對根文件夾app.get('/')的get請求，您可以看到它正在對從json文件導出的項目調用JSON.stringify （因此，該示例未使用數據庫）。 前端文件app.js似乎在對節點提供的data項上調用app.menuItems.reset({{{ data }}}) 。

我對此有一個疑問，本教程沒有解釋

1）如果節點使用初始的get請求提供data ，為什么還要調用app.menuItems.reset({{{ data }}}) ？。 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 /確實會返回瀏覽器處理該請求所需的所有信息，但是直到您使用數據調用reset之前，主干集合才知道該數據在頁面中。

嘗試這個：

將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集合。

reset是一種骨干方法，它使集合清空其可能擁有的所有數據，並將傳入的數據加載為自身的數據。 因此，這將根據data的所有項目創建模型，然后將所有這些模型附加到集合中。

我想你的app.js代碼中某處也有類似this.listenTo(app.menuItems, 'reset', func...)或this.on('reset', func...) ，這也會導致數據加載到集合中時，應用程序實際上會執行某些操作。