consuming RESTful api with backbone
<p>I have a backbone application and a RESTful api.  I used the sample created by Coenraets to understand the architecture of a backbone app, but I decided to setup my own structure and just use the data for testing.  </p>

<p>I want to know the best way to return data from the RESTful api.  I currently have my app folder structure setup with model, collection, view and service folders.  I have a node server running with express that handles the backend and is working fine.</p>

<p>What I want to know is what is the best practice for accessing the restful data api?  Should I do that in my service class or in my view class?  How do I make this work dynamically using the returned data from my restful api:  <code>http://localhost:3000/employees</code>  </p>

<p>It seems like there are many ways to do this and for now I just want something that works, but eventually I do want to know what is the best way to do it.  Ultimately I want to have a CRUD setup. But I'm not sure where that should be setup.  Similar to what is detailed here: <code>http://www.codeproject.com/Articles/797899/BackBone-Tutorial-Part-CRUD-Operations-on-Backbone</code></p>

<p>My files are as follows:</p>

<p>employeecolletion.js</p>

<pre><code>var Backbone = require('backbone');
var Employee = require('../models/employeemodel.js');

module.exports = Backbone.Collection.extend({
    model: Employee,
    url:"http://localhost:3000/employees"
});
</code></pre>

<p>employeemodel.js</p>

<pre><code>var Backbone = require('backbone');
var EmployeeCollection = require('../collections/employeecollection.js');

module.exports = Backbone.Model.extend({

    urlRoot:"http://localhost:3000/employees" 

    // initialize:function () {
    //     this.reports = new EmployeeCollection();
    //     //this.reports.url = this.urlRoot + "/" + 1 + "/reports";

    // }

});
</code></pre>

<p>employee.js (employee view that binds to my template)</p>

<pre><code>var fs = require('fs');
var base = require('./base.js');
var EmployeeList = require('../collections/employeecollection.js');
var employeeService = require('../services/employeeService.js');
var template = fs.readFileSync('app/templates/employee.mu', { encoding: 'utf8' });


module.exports = base.extend({
  el: '.view',
  template:template,
  collection: employeeService.collection,

  initialize: function () {
    this.viewModel = {
      employee_list: this.collection.toJSON()
      //employee_list: this.collection.fetch() --HERE I EXPERIMENTED WITH FETCHING THE DATA
    };
    this.render();
  }
});
</code></pre>

<p>employeeservice.js (file in service folder that would ideally return the collection which I would just bind to my template in they employees view file)</p>

<pre><code>var EmployeeCollection = require('../collections/employeecollection.js');

//if wanting to pass in data manually
var employee_list = [
    {
        id:1,
        firstName:"James",
        lastName:"King",
        fullName:"James King",
        managerId:0,
        managerName:"",
        title:"President and CEO",
        department:"Corporate",
        cellPhone:"617-000-0001",
        officePhone:"781-000-0001",
        email:"jking@fakemail.com",
        city:"Boston, MA",
        pic:"james_king.jpg",
        twitterId:"@fakejking",
        blog:"http://coenraets.org"
    }
];

//HERE I WAS EXPERIMENTING WITH A DIFFERENT SYNTAX TO DO THE FILTERING BY ID
//IN MY SERVICE AND SIMPLY RETURNING THE FINAL DATA I WANT TO MY VIEW CLASS

// var employees = new EmployeeCollection({id: id});

//  employees.fetch({
//      success: function (data) {
//          console.log(data);
//      }
//  });


module.exports = {
  collection: new EmployeeCollection(employee_list)
};
</code></pre>