Backbone data model and collection for AngularJS

• AngualrJS
• UnderscoreJS / LoDash
• BackboneJS

To make Backbone work properly with AngularJS, ng-backbone overrides Backbone's sync and ajax methods.

Base NgBackbone model extends Backbone.model by adding additional properties and functions, including $attributes and $status. When overriding NgBackboneModel set method but you would like to keep $attributes, you'll have to explicitly call NgBackboneModel set:

var Sample = NgBackboneModel.extend({  
  set: function(key, val, options) {  
    NgBackboneModel.prototype.set.apply(this, arguments);  
  }  
});  

In rare cases when you want to override the constructor which allows you to replace the actual constructor function for your model, you should invoke NgBackboneModel constructor in the end.

var Sample = NgBackboneModel.extend({  
  constructor: function() {  
    this.text = 'Sample!';  
    NgBackboneModel.apply(this, arguments);  
  }  
});  

The $attributes property allows application to use AngularJS two-way binding to manipulate Backbone objects using Backbone get and set.
HTML:

<input type="text" ng-model="person.$attributes.name">  

Javascript:

$scope.person = new Person({  
  name: 'John'  
});  

The $status property is the hash containing model sync state. Since $status updates using Backbone event, passing {silent: true} will prevent $status from updating. $status contains four properties, including:

• deleting: Set to true when invoking destroy method on model (HTTP DELETE request)
• loading: Set to true when fetching model data from server (HTTP GET request)
• saving: Set to true when creating or updating model (HTTP POST or PUT request)
• syncing: Set to true whenever a model has started a request to the server

HTML:

<span ng-if="user.$status.loading">Loading</span>  
<label>{{user.name}}</label>  

Javascript:

$scope.user = new User({id: '123'});  
$scope.user.fetch();  

Reset all properties on $status including deleting, loading, saving, and syncing back to false

Update model status on $status

attributes
Type: Object
Set one or multiple statuses

options
Type: Object
Options

Base NgBackbone collection extends Backbone.collection by adding additonal properties and functions, such as $models and $status.

Similar to NgBackboneModel, in rare cases where you may want to override the constructor, you should invoke NgBackboneCollection in the end.

var SampleCollection = NgBackboneCollection.extend({  
  constructor: function(models, options) {  
    this.allSamples = false;  

    NgBackboneCollection.apply(this, arguments);  
  }  
});  

The $models property creates a one-way binding to collection models which is the Javascript array of models. Application can only access the array with $models but will not be able to modify it.
HTML:

<ul>  
  <li ng-repeat="user in users.$models">{{user.username}}<li>  
</ul>  

Javascript:

$scope.users = new Users();  
$scope.users.fetch();  

The $status property is the hash containing collection and its models sync state. Since $status updates using Backbone event, passing {silent: true} will prevent $status from updating. $status contains four properties, including:

• deleting: Set to true when one of its models is getting destroyed (HTTP DELETE request)
• loading: Set to true when fetching collection data from server (HTTP GET request)
• saving: Set to true when creating or updating one of its models (HTTP POST or PUT request)
• syncing: Set to true whenever a collection has started a request to the server

HTML:

<ul>  
  <li ng-if="users.$status.loading">Loading...</li>  
  <li ng-repeat="user in users.$models">{{user.username}}<li>  
</ul>  

Javascript:

$scope.users = new Users();  
$scope.users.fetch();  

Update collection status

Type: function

attributes
Type: Object
Set on or multiple statuses

options
Type: Object
Options

Reset all statuses including deleting, loading, saving, and syncing back to false

Type: function