Passing Backbone Fetch/Initialise Variable to the view

Question

Using Backbone to gather collections from a JSON service, I have using the view initialise to activate the fetch, however I now want to pass the JSON Array back to the view, but I'm unsure how to achieve this...

The following code is what I'm currently using:

app.AppView = Backbone.View.extend({

        initialize: function(){


            // Instanciate a new Form collection (which is derrived from the input model)
            var inputs = new app.Form();

            // Perform a GET on the model url to the service
            inputs.fetch({

                success: function() {

                    var questions = inputs.get(0).toJSON().Questions;

                    console.log(questions);



                }, // End Success()

                error: function(err){
                    console.log("Couldn't GET the service " + err);
                }

            }); // End Input.fetch()

            this.render();

        }, // End Initialize

        render: function(){
            el: $('#factfinder')
            var template = _.template( $("#form_template").html(), {} );
            this.$el.html(template);

        } 

    }); // End AppView.Backbone.View.extend()

Answer 1

Firstly fetch is Asynchronous. So you would need to always call the render when the request comes back from the server. The best way can be listening to the reset and sync event on the server and which calls the render method.

app.AppView = Backbone.View.extend({
        el: $('#factfinder'),
        initialize: function() {

            var inputs = new app.Form();

            // Listen top the events that calls the success method
            this.listenTo(inputs, 'sync reset', this.renderView);
            //  to bind the this context
            _.bindAll(this, 'renderView');
            // Perform a GET on the model url to the service
            inputs.fetch({
                error: function(err){
                    console.log("Couldn't GET the service " + err);
                }
            }); // End Input.fetch()

        }, // End Initialize
        renderView: function() {
           var questions = inputs.get(0).toJSON().Questions;
           console.log(questions);
           // Call render when the request comes back with response
           this.render();
        },
        render: function(){
            var template = _.template( $("#form_template").html(), {} );
            this.$el.html(template);
        } 

    }); // End AppView.Backbone.View.extend()

And you have the syntax error inside the render method

el: $('#factfinder')

supposed to be

var el = $('#factfinder')

Or you can move it to outside the render