How to make Backbones toJSON function include sub-models and collections

backbone.js

I have a few models that don't just contain basic data attributes, but they might have one or two attributes that hold another models object.

This has been okay, but now I want to call

myRootModel.toJSON()

and I've noticed that it doesn't call .toJSON on the other models in my model that I'm trying to call toJSON() on.

Is there a way to override backbone model .toJSON to go through all fields, recursively, whether they are basic attributes, sub-models or collections? If not, can I override toJSON in each model / collection?

I'm aware of backbone-relational, but I don't want to go that route – I'm not using fetch/save, instead our API returns responses that I adjust in the models parse function and simply invoke new MyRootModel(data,{parse:true}).

Best Answer

Here's a way you can achieve such a thing (there's maybe another way):

Backbone.Model.prototype.toJSON = function() {
  var json = _.clone(this.attributes);
  for(var attr in json) {
    if((json[attr] instanceof Backbone.Model) || (json[attr] instanceof Backbone.Collection)) {
      json[attr] = json[attr].toJSON();   
    }
  }
  return json;
};

http://jsfiddle.net/2Asjc/.

Related Solutions

Jquery – “How” to save an entire collection in Backbone.js – Backbone.sync or jQuery.ajax

My immediate thought is not to override the method on save method on Backbone.Collection but wrap the collection in another Backbone.Model and override the toJSON method on that. Then Backbone.js will treat the model as a single resource and you don't have to hack the way backone thinks too much.

Note that Backbone.Collection has a toJSON method so most of your work is done for you. You just have to proxy the toJSON method of your wrapper Backbone.Model to the Backbone.collection.

var MyCollectionWrapper = Backbone.Model.extend({
url: "/bulkupload",

//something to save?
toJSON: function() {
    return this.model.toJSON(); // where model is the collection class YOU defined above
 }

});

Javascript – Models and Collections in Angular

This is indeed a very interesting question,and I'd like people to think about solutions. In theory,you could stick with Backbone models.It may have a performance cost but.There is no reason it wouldnt work.

Develop your model layer,without thinking about AngularJS.Then you'd have to extend your models and add a listener in your initialize function that would trigger a $rootScope.$apply whenever the model changes,same for any collection you might use.Something like :

/*global angular,Backbone*/
angular.module('ng')
    .value('Backbone', Backbone)
    .factory('AngularModel', function(Backbone, $rootScope) {
        return Backbone.Model.extend({
            initialize: function() {
                this.on('all', function() {
                    if (!$rootScope.$$phase) {
                        $rootScope.$apply();
                    }
                });
            }
        });
    })
    .factory('AngularCollection', function(AngularModel, $rootScope) {
        return Backbone.Collection.extend({
            model: AngularModel,
            initialize: function() {
                this.on('all', function() {
                    if (!$rootScope.$$phase) {
                        $rootScope.$apply();
                    }
                });
            }
        });
    });

function Main($scope, AngularCollection) {
    $scope.collection = new AngularCollection([{
        name: "foo"
    }, {
        name: "bar"
    }, {
        name: "baz"
    }]);
    $scope.addModel = function(model) {
        $scope.collection.add(model);
    };

}

and the view

<body ng-app ng-controller="Main">
    <div ng-repeat="model in collection.models">{{model.get('name')}}</div>
    <form name="model_form" ng-submit="addModel(model)">
        <fieldset>
            <legend>Add model</legend>
            <label for="">Name</label>
            <input type="text" ng-model="model.name" />
            <input type="submit" />
        </fieldset>

    </form>
</body>

Some DEMO HERE

Now in my opinion,AngularJS works better with raw js hashes.But If you need to port something to AngularJS from Backbone,it can be a solution if already have a strong model layer.

EDIT:it might work without the expensive $rootScope.$apply,

Best Answer

Related Solutions

Jquery – “How” to save an entire collection in Backbone.js – Backbone.sync or jQuery.ajax

Javascript – Models and Collections in Angular

Related Topic