How to render jsonp fetched in BackboneJS?

Question

I'm new in BackboneJS, and I can't render information from JSONP. If I put the data into a data.json and I fetch it, the count appears in the console, but when I use JSONP never re-render. I don't know if is some kind of delay for obtain the data, but the event of "change" and "reset" are not being trigged by the collection to re-render the view. The code I have is the next:

// Collection

define([
'underscore',
'backbone',
'models/EstablecimientoModel'],function(_, Backbone, EstablecimientoModel){

var EstablecimientoCollection = Backbone.Collection.extend({
    model: EstablecimientoModel,

    initialize: function(models, options) {
        console.log("Establecimiento initialize");
    },

    url: function() {
        return '../js/establecimientos.json';  
        //return 'http://localhost:3000/establecimiento';
    },

    parse: function(data) {
        console.log("End of loading data " + JSON.stringify(data) + " datos");
        return data;   
    },
});

return EstablecimientoCollection;

});

// Router

define([
    'jquery',
    'underscore',
    'backbone',
    'views/establecimiento/EstablecimientoView',
    'jqm'
], function($, _, Backbone,EstablecimientoView) {
    'use strict';
    var Router = Backbone.Router.extend({
        //definition of routes
        routes: {
            'nearMe' : 'nearMe',
        },
        nearMe: function(actions) {
            var estaColl = new EstablecimientoCollection();

            var establecimientoView = new EstablecimientoView({ collection: estaColl });
            //estaColl.fetch();
            //establecimientoView.render();
            this.changePage(establecimientoView);
        },
        init: true,
        changePage: function(view) {
            //add the attribute data-role="page" for each view's div
            $(view.el).attr('data-role','page');
            view.render();
            // append to the DOM
            $('body').append($(view.el));
            var transition  = $.mobile.defaultPageTransition;

            if(this.firstPage) {
                transition = 'none';
                this.firstPage = false;
            }

            // Remove page from DOM when it’s being replaced 
            $('div[data-role="page"]').on('pagehide', function (event, ui) { 
                $(this).remove();
            });

            $.mobile.changePage($(view.el), { transition: transition, changeHash: false });   

        } // end of changePage()
    });

    return Router;
});

// View

define([
    'jquery',
    'underscore',
    'backbone',
    'collections/EstablecimientoCollection',
    'text!templates/establecimiento/establecimientoTemplate.html'
],function($, _, Backbone, EstablecimientoCollection, establecimientoTemplate) {

    var EstablecimientoView = Backbone.View.extend({
        initialize: function() {
            var self = this;

            _.bindAll(this,"render");
            this.collection.on("change",self.render);
            this.collection.fetch({ dataType: 'jsonp', success: function(){ self.render() }});

        }, //end of initialize()

        template: _.template(establecimientoTemplate),        

        render: function(eventName) {
            console.log("render");
            console.log(this.collection.length);

            return this;
        }, //end of render()
    });

    return EstablecimientoView;
});

Answer 1

When you fetch your data, make sure you're setting the dataType for your fetch call. Fetch is wrapping a jQuery/Zepto ajax call, so you'll need to set the same parameters you would with those.

this.collection.fetch({
    reset: true,
    dataType: 'jsonp',
    success: function () {
        // do stuff
    }
});

Also, I'd have your view listen for the events published by the collection rather than calling the view's render directly from the fetch's success callback.