CODEWITHSUNDEEP
javascriptjquerybackbone.jsunderscore.js
Jacob Clark
Jacob Clark

Reputation: 3447

Passing Backbone Fetch/Initialise Variable to the view

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()

Upvotes: 3

Views: 527

Answers (2)

Sushanth --
Sushanth --

Reputation: 55740

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

Upvotes: 1

McGarnagle
McGarnagle

Reputation: 102743

You typically wouldn't pass the JSON to render, but rather set the model. Also, you need to call render inside the success callback, since the fetch is asynchronous:

// store a reference to the view object
var self = this;

inputs.fetch({
    success: function() {
        var questions = inputs.get(0).toJSON().Questions;
        console.log(questions);
        this.model = new Backbone.Model(questions);
        self.render();
    }, // End Success()
    error: function(err){
        console.log("Couldn't GET the service " + err);
    }
}); // End Input.fetch()

Now in render, you can get the JSON back from the model:

this.$el.html(template(this.model.toJSON()));

This may seem to be a roundabout way of doing it -- construct a model from JSON, then get the JSON back from the model. But this is by design. It allows the model a chance to do its thing, setting any defaults it has, and validating the raw data coming back from the server.

Upvotes: 0

Related Questions