CODEWITHSUNDEEP
javascriptoopbackbone.js
GantengX
GantengX

Reputation: 1501

Javascript Backbone model design

Fairly new to JavaScript so it might be a noobish question.

At the moment for my project I'm using NodeJS for my server and Backbone for the client. The client will send a request to the server and the server will send list of files in the server, my aim was to simply return the list of files and when user click on the file it will send another request to the server to load the file.

Currently in the client level my model and collection is defined something like:

app.MyFile = Backbone.Model.extend({
    defaults: {
        modifiedDate: new Date(),
        path: '',
        content: '' // content of the file
    }
});

var MyFileList = Backbone.Collection.extend({
  model: app.MyFile,
  url: '/api/files'
});

// create global collection of files
app.MyFiles = new MyFileList();

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

And my server code:

var application_root = __dirname,
    express = require("express"), 

...
app.get('/api/files', function(req, res) {
    ...
    // return file list
}

app.get('/api/files/:id', function(req, res) {
    ...
    // return file content?
}

Since it doesn't make sense to load all files in the directory and send it back to the client, what I did was I created the model in the server and fill up modifiedDate and path while leaving content to null. But the problem now is that how do I fill up the content when user clicks on the file? I'm not sure how to manually send an HTTP request from Backbone View or controller. Or is there any better way of doing this? One way that I can think of is to create another model that only keeps modifiedDate and path but to me this looks very verbose and repetitive.

Upvotes: 0

Views: 378

Answers (2)

Paul Hoenecke
Paul Hoenecke

Reputation: 5060

Given what you have on the client side, you may not need anything more.

app.MyFiles = new MyFileList();

app.MyFiles.fetch().done(function() {
   // your collection is fetched but each model's content is empty.
   // now, I assume at this point you will show them in some view/views.
});

Now when one of those things is clicked on, you can fetch the content.

var model = app.MyFiles.get(id);
model.fetch().done(function() {
    // now the model's content attribute will be set
});

This might work with no more code than what you showed. Because the url a model uses to fetch is created by default by appending the model's id to the end of its collection's url.

So from your server, you return a json array from '/api/files': [{id:1, path:'foo'}, {id:2, path:'bar'}]

Then from '/api/files/1': {id:1, path:'foo', content:'whatever'}

Upvotes: 2

monshq
monshq

Reputation: 343

When user clicks the file, you can call backbone's fetch method on the model. Then your model will be filled with data from the server.

Note that for this to be working you should return collection from the server first, where models at least have id's. Every other field will be filled after fetch call. Also, you should override model url, if it differs from standard (which is collection/id).

Upvotes: 1

Related Questions