backbonejs and django

[Eddilbert Macharia]

Hi All,

i am using django-tastypie to return django models as json object.

when i run the following code

var org = Backbone.Model.extend({

               urlRoot: 'api/orgnanization/',
        });


        var orgColl=Backbone.Collection.extend({
            model: org,
               urlRoot: 'api/orgnanization/',
               initialize:function(){
                   this.fetch();
                   console.log(this)
               }
        });

        var apiView=Backbone.View.extend({
            el:'.try',
            //template:,
            initialize:function(){
                this.listenTo(this.collection,'reset',this.render)
            },
            //events:{},
            render:function(){
                console.log(this.collection)
                //this.$el.html(this)
            },
        });

        var cos=new orgColl()
        new apiView({collection:cos})

i get the following in the chrome console

r {length: 0, models: Array[0], _byId: Object, constructor: function, model: function…}

1. _byId: Object
2. _events: Object
3. _listenerId: "l7"
4. length: 1
5. meta: Object
6. models: Array[1]
7. __proto__: s

but when i look a the network the model is actually fetched from the database

1. meta: {limit:20, next:null, offset:0, previous:null, total_count:3}
1. limit: 20
2. next: null
3. offset: 0
4. previous: null
5. total_count: 3
2. objects: [{id:1, name:eddmashinc, resource_uri:}, {id:2, name:trive, resource_uri:},…]
1. 0: {id:1, name:eddmashinc, resource_uri:}
1. id: 1
2. name: "eddmashinc"
3. resource_uri: ""
2. 1: {id:2, name:trive, resource_uri:}
1. id: 2
2. name: "trive"
3. resource_uri: ""
3. 2: {id:3, name:mashainc, resource_uri:}
1. id: 3
2. name: "mashainc"
3. resource_uri: ""
4. 
   

how do i get this data to display on the backbone view or what im i doing wrong ??

[Sanjay Bhangar]

Hi,

It seems like the JSON you're getting back from the server puts your
items under a key called 'objects'. A Backbone Collection, by default,
if you just provide it a urlArg, will expect the server to return an
array / list of items.

It does, however, provide a parse method that you can over-ride to
parse the JSON you get from the server and return an array.

So, your Collection definition would look something like:

var orgColl=Backbone.Collection.extend({
model: org,
urlRoot: 'api/orgnanization/',
initialize:function(){
this.fetch();
console.log(this)

},
parse: function(response) {
return response.objects;
}
});

See: http://backbonejs.org/#Collection-parse

All the best,
Sanjay

[Eddilbert Macharia]

Hi sanjay,

Thanks for your reply,here is how I did it this way

$(function(){
        // event object
        var vent=_.extend({},Backbone.Events)

        // the model
        var myModel=Backbone.Model.extend();

        // the model collection
        var myModelCollection=Backbone.Collection.extend({
            model:myModel,
            urlRoot: 'resp',
            initialize:function(){
                this.fetch({
                    success:function(){
                        vent.trigger('fetched')
                    }
                })
            },
        });

        // one model view
        var myModelView=Backbone.View.extend({
            tagName:'p',
            template:_.template($('#demotpl').html()),
            initialize:function(){
                //this.render()
            },
            render:function(){
                this.$el.html(this.template(this.model.toJSON()));
                return this;
            },
        });


        // model collection view
        var myModelCollectionView=Backbone.View.extend({
            el:'.demo',
            initialize:function(){
                vent.on('fetched',this.render,this)
                //this.render()
            },
            render:function(){
                this.collection.each(this.one,this)
            },
            one:function(onemod){
                var onemodView=new myModelView({model:onemod})
                console.log(onemod)
                this.$el.append(onemodView.render().el)
            }
        });

        // initialize the collection
        var newCollection=new myModelCollection()

        // initaliaze collection view
        var newCollectionView=new myModelCollectionView({collection:newCollection})
});

is there another way i could have done it?