StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POBackbone collection within model + restful server design using Node.js
text
Body
copied!<p>I'm trying to develop a simple file browser using Backbone for the client and Node.js for the server. At the moment I'm quite stuck on how to design the model when it comes to subfolder</p> <p>Client code looks something like</p> <pre><code>app.MyFile = Backbone.Model.extend({ defaults: { path: '', // id of the model will be the path + filename content: '', // content of the file isDir: false // if file is a directory } }); var MyFileList = Backbone.Collection.extend({ model: app.MyFile, url: '/api/files' }); // create global collection of files app.MyFiles = new MyFileList(); // displays file name var MyFileItemView = Backbone.View.extend({ events: { 'click .clickable': 'view' }, ... view: function (source) { if (this.model.toJSON().isDir) { this.model.fetch(); // XXX what to do here _.each(this.model.get('content'), function (obj) { console.log(obj.toJSON()); // error - no toJSON method }); } else { // calls another view that calls the model.fetch // to display the content (no issue here) } }, }); var MyFilesListView = Backbone.View.extend({ initialize: function () { // XXX Not sure if I should listen on MyFiles collection... app.MyFiles.on('reset', this.render, this); }, render: function () { app.MyFiles.each(function (file) { new MyFileItemView({model:file}); }, this); }); app.AppView = Backbone.View.extend({ initialize: function () { // fetch all files app.MyFileList.fetch(); } }); // app.js (point of entry) $(function() { // Kick things off by creating the **App**. new app.AppView(); }); </code></pre> <p>My server code:</p> <pre><code>var express = require("express"), ... app.get('/api/files', function(req, res) { ... // return file list (including folder - no issue here) } app.get('/api/files/:id', function(req, res) { var fileModel = createFileModel(req.params.id); // create file model if (!fileModel.isDir) { // if file is not directory, then simply read the content and return // it back to the client -- no issue ... } else { var files = []; // read the directory to find all the files and push it to // files array ... fileModel.content = files; res.send(fileModel); } } </code></pre> <p>At the moment I'm not sure what is the correct way to do this. My questions:</p> <ol> <li>How to represent the model object itself. Should I just set the content to collection of MyFile if <code>isDir===true</code>? If this is the case, how should I do that? calling <code>toJSON()</code> on the model's content throws an exception because <code>toJSON</code> is not defined</li> <li>Also on the <code>MyFilesListView</code> should it listen to the global collection as well? Now that I need to handle sub folders it doesn't seem right.</li> <li>Or should I overrides the global collection when trying to view the subfolder?</li> <li>Is my server code implementation correct? The problem I'm having now is that when I put the content into array and send fileModel back to the client, the list of files are not reflected in the model itself - perhaps I must override <code>parse</code>?</li> </ol> <p>I read some posts here</p> <ul> <li><a href="https://stackoverflow.com/questions/9896141/nested-models-of-the-same-class-in-the-backbone-js-framework">Nested models of the same 'class' in the Backbone.js framework?</a></li> <li><a href="https://stackoverflow.com/questions/5501562/backbone-fetch-collection-from-server">Backbone: fetch collection from server</a></li> <li><a href="https://stackoverflow.com/questions/8782619/how-to-build-a-collection-model-from-nested-json-with-backbone-js">How to build a Collection/Model from nested JSON with Backbone.js</a></li> </ul> <p>But I'm still not sure how to apply it... Javascript is confusing :(</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload