Using Backbone models with AngularJS

a working binding for example above... http://jsbin.com/ivumuz/2/edit

it demonstrates a way for working around Backbone Models with AngularJS. but setters/getters connection would be better.

Had a similar idea in mind and came up with this idea: Add just a getter and setter for ever model attribute.

Backbone.ngModel = Backbone.Model.extend({
        initialize: function (opt) {
         _.each(opt, function (value, key) {
             Object.defineProperty(this, key, {
                 get: function () {
                     return this.get(key)
                  },
                 set: function (value) {
                     this.set(key, value);
                 },
                 enumerable: true,
                 configurable: true
             });
         }, this);
     }
 });

See the fiddle: http://jsfiddle.net/HszLj/

I was wondering if anyone had done this too. In my most recent / first angular app, I found Angular to be pretty lacking in models and collections (unless I am missing something of course!). Sure you can pull data from the server using $http or $resource, but what if you want to add custom methods/properties to your models or collections. For example, say you have a collections of cars, and you want to calculate the total cost. Something like this:

With a Backbone Collection, this would be pretty easy to implement:

carCollection.getTotalCost()

But in Angular, you'd probably have to wrap your custom method in a service and pass your collection to it, like this:

carCollectionService.getTotalCost(carCollection)

I like the Backbone approach because it reads cleaner in my opinion. Getting the 2 way data binding is tricky though. Check out this JSBin example.

http://jsbin.com/ovowav/1/edit

When you edit the numbers, collection.totalCost wont update because the car.cost properties are not getting set via model.set().

Instead, I basically used my own constructors/"classes" for models and collections, copied a subset of Backbone's API from Backbone.Model and Backbone.Collection, and modified my custom constructors/classes so that it would work with Angular's data binding.

Try taking a look at restangular.

I have not implemented it anywhere, but I saw a talk on it a few days ago. It seems to solve the same problem in an angular way.

Video: http://www.youtube.com/watch?v=eGrpnt2VQ3s

Valid question for sure.

Lot of limitations with the current implementation of $resource, which among others doesn't have internal collection management like Backbone.Collection. Having written my own collection/resource management layer in angular (using $http, not $resource), I'm now seeing if I can substitute much of the boilerplate internals for backbone collections and models.

So far the fetching and adding part is flawless and saves code, but the binding those backbone models (or the attributes within, rather) to ng-models on inputs for editing is not yet working.

@ericclemmons (github) has done the same thing and got the two to marry well - I'll ask him, get my test working, and post the conclusion...

Using Backbone models with AngularJS

Related

Recent Posts