Karthik Karthik - 1 year ago 78
Ajax Question

BackboneJS with XML ajax

this is a two part question from a JS newbie.

So, I was trying to create a backbone application using requireJS by following Thomas Davis's tutorial.

  1. How do I go create Backbone collections out of an ajax call to a server that provides data in XML? collections.fetch() seem to be expecting a JSON backend.

  2. while trying some things, I ended up with the following code, in which the page doesn't refresh upon populating the collection "bookStore" from within Ajax success-callback.

    Here is how far I have gotten so far.

    var bookListView = Backbone.View.extend({
    el: $("#books"),
    initialize: function () {
    thisView = this;
    type: "GET",
    url: "books.xml",
    dataType: "xml",
    success: function (data) {
    $(data).find('book').each(function (index) {
    var bookTitle = $(this).find('name').text();
    bookStore.add({ title: bookTitle });

    thisView.collection = bookStore;
    thisView.collection.bind('add', thisView.tryBind);

    }).done(function (msg) {
    alert("Data retrieved: " + msg);

    this.collection = bookStore;
    this.collection.bind("add", this.exampleBind);
    this.collection.bind("refresh", function () { thisView.render(); });
    // This one works!
    bookStore.add({ name: "book1" });
    bookStore.add({ name: "book2" });
    bookStore.add({ name: "book3" });
    tryBind: function (model) {
    render: function () {
    var data = {
    books: this.collection.models,
    var compiledTemplate = _.template(bookListTemplate, data);

Here, the success call-back in the "initialize" function seems to be processing the data properly and adding to the collection. However, the page doesn't refreshed.

While I was stepping through the Firebug console, the page gets refreshed however. How do I solve this problem?

Answer Source
  1. You can override the default parse function to provide XML support. It should return the data transformed into JSON http://backbonejs.org/#Collection-parse

  2. Bind the render to a reset event instead of refresh for Backbone<1.0 or to a sync event for Backbone>=1.0

It could look like this

var Book = Backbone.Model.extend();

var Books = Backbone.Collection.extend({
    model: Book,
    url: "books.xml",

    parse: function (data) {
        var $xml = $(data);

        return $xml.find('book').map(function () {
            var bookTitle = $(this).find('name').text();
            return {title: bookTitle};

    fetch: function (options) {
        options = options || {};
        options.dataType = "xml";
        return Backbone.Collection.prototype.fetch.call(this, options);

var bookListView = Backbone.View.extend({
    initialize: function () {
        this.listenTo(this.collection, "sync", this.render);

    render: function () {

var bks = new Books();
new bookListView({collection: bks});

And a demo http://jsfiddle.net/ULK7q/73/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download