Question

I have the following backbone.js code and i have a problem in that event before i fetch the “add” event is triggered from the collections. Adding this.field.add(list_fields); in the success: fetch has resulted in an error. How do i make sure the model is fetched then the add event is run after that

$(function() {
        $(".chzn-select").chosen();
        /*********************************Models*************************************************/
        var Table = Backbone.Model.extend({

            urlRoot : '/campusfeed/index.php/welcome/generate'
        });
        var Field = Backbone.Model.extend({
            urlRoot: '/campusfeed/index.php/welcome/generate' 
        });
        /**************************Collections*************************************************/    
        Tables = Backbone.Collection.extend({
            //This is our Friends collection and holds our Friend models
            initialize : function(models, options) {
                this.bind("add", options.view.addFriendLi);
            //Listen for new additions to the collection and call a view function if so
            }
        });

        var Fields = Backbone.Collection.extend({
            model:Field,
            url:'http://localhost/campusfeed/index.php/welcome/generateFields',
            initialize : function(models, options) {
                this.bind("add", options.view.getFields);
            }
        });
        /************************************Views**************************************************/
        var m="shit";
        var app = Backbone.View.extend({
            el:'body',
            initialize:function(model,options){
                //Create collections in here

                this.table = new Tables(null,{
                    view : this
                });
                this.field = new Fields(null,{
                    view : this
                });
            },
            events : {
                "click #choose" : "generate"

            },
            generate:function(){
                var table = ( this.$("#table option:selected").text());
                var dbname = ( this.$("#database").text());
                var list_fields = new Field();
                list_fields.urlRoot = list_fields.urlRoot+"/"+dbname+"/"+table;
                list_fields.fetch({
                    success:function(){
                        console.log(JSON.stringify(list_fields));


                    }
                });

                this.field.add(list_fields);

            },

            getFields:function(model){

               console.log(JSON.stringify(model));


            }



        });
        var apprun = new app;
    /* var data = new Fields();
        data.url=data.url+"/some/data";
        alert(data.url);
        data.fetch();
        var staff = new Table();
        staff.fetch();
        var field = new Field();*/
    });

Answer 1

the problem is the context of “this”. the success callback function has “this” set to the list_fields. you can work around this with a “self” or “that” variable:

        generate:function(){
            var table = ( this.$("#table option:selected").text());
            var dbname = ( this.$("#database").text());
            var list_fields = new Field();
            list_fields.urlRoot = list_fields.urlRoot+"/"+dbname+"/"+table;
            var that = this;
            list_fields.fetch({
                success:function(){
                    console.log(JSON.stringify(list_fields));

                    that.field.add(list_fields);
                }
            });
        },

as a side note – your collections should never have a reference to a view. instead, your view should reference the collection and bind to the collection event

    var Fields = Backbone.Collection.extend({
        model:Field,
        url:'http://localhost/campusfeed/index.php/welcome/generateFields',
    });

    var app = Backbone.View.extend({
        initialize:function(model,options){
            //Create collections in here

            this.field = new Fields();
            this.field.bind("add", this.getFields, this);
        },
        getFields: function(){ ... }
    });