The main collection in the model + a quiet server using Node.js

Question

I am trying to create a simple file browser using Backbone for the client and Node.js for the server. Right now I'm pretty fixated on how to design a model when it comes to subfolders

Client code looks something like this:

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(); }); 

My server 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); } } 

At the moment, I'm not sure if this is the right way to do this. My questions:

• How to imagine the model object itself. Should I just set the content to the MyFile collection if isDir===true ? If so, how should I do it? calling toJSON() in the contents of the model throws an exception because toJSON not defined
• Also on MyFilesListView should I listen to the global collection? Now that I need to process the subfolders, this seems wrong.
• Or should I redefine the global collection when trying to view a subfolder?
• Is my server code implementation implemented correctly? The problem that I am facing now is that when I put the contents into an array and send the Model file back to the client, the list of files is not reflected in the model itself - maybe I should override parse ?

I read a few posts here

• Nested models of the same class in the Backbone.js structure?
• Highway: fetching a collection from the server
• How to assemble a collection / model from nested JSON using Backbone.js

But I'm still not sure how to apply it ... Javascript is confused :(

Answer 1

You can write a simple model in a model with a simple function like this in your only model (the xfile model you can name!):

  loadFolders : function() { if (this.get('isDir')) { var self = this; self.subFolders = []; _.each(self.get('files'), function(data) { file = new File(data); self.subFolders.push(file); }); } } 

and do the same in your view model to display the correct tree view.

And in your express.js backend file (I am not familiar with this framework) you just send the correct json to your base models.

If your data is too long and you want each model directory to be separate (when expanding the user folder in your view), you can create a model with a lot of collections (or collections with a lot of collections) with the same idea, then extract the data from the server in the model, and the backend should support directories, something like this: /api/file/folder1/folder2/file1.txt

Another way to do something more magical is to use a relational model (using any backbone extension that provides such a function)

If you want to know more about:

An example of marionette.js that does the same

Backbone.Relational - relational extension for bakcbone

PS: I can’t provide more links, so you can search for Backbone.associate, which is another relational extension for the backbone

PS 2: you can use coffeescript, which makes javascript syntax simpler and more understandable.