Read XML and append in view using Backbone js

Question

How to read XML and append in view with Backbone.

XML file has been read and successfully appended in view. But i don\'t know how to approach in Backbo

Answer 1

Don't put the rendering logic into the collection's parse function.

The collection's role is to manage models and syncing with an API. It's the view's responsibility to render.

First, let's simplify the collection parsing. From the Backbone documentation, parse should do the following only:

The function is passed the raw response object, and should return the array of model attributes to be added to the collection.

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

    // this will return an array of objects
    return $xml.find('assets').children('asset').map(function() {
        var $asset = $(this);

        // returns raw "model" attributes
        return {
            asseturl: $asset.attr('asseturl'),
            width: $asset.attr('width'),
            height: $asset.attr('height')
        };

    }).get();
},

Then, make a simple view for each asset:

var BookView = Backbone.View.extend({
    tagName: 'li',
    template: _.template('<span class="asset char"><img width="<%= width %>" height="<%= height %>" src="<%= asseturl %>"></span>'),
    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

And it's in the list view that the rendering of each assets is handled.

var BookListView = Backbone.View.extend({
    initialize: function() {
        this.childViews = [];
        this.listenTo(this.collection, "sync", this.render);
    },
    render: function() {
        this.$el.empty();
        this.collection.each(this.renderBook, this);
        return this;
    },
    renderBook: function(model) {
        var view = new BookView({ model: model });
        this.childViews.push(view);
        this.$el.append(view.render().el);
    },
});

To use it:

var bks = new Books(),
    view = new BookListView({ el: $('.character-list'), collection: bks });
view.render();
bks.fetch();