Fetching directory contents to json in backbone

Question

I have folder that contains images; I call fetch on the folder uploads/ and my GET returns with the following response in HTML (no json etc)

<h1>Index of /backbone_images/uploads</h1>
<ul><li><a href="/backbone_images/"> Parent Directory</a></li>
<li><a href="2012-12-11%2015.30.221.jpg"> 2012-12-11 15.30.221.jpg</a></li>
<li><a href="ian1.jpg"> in1.jpg</a></li>
<li><a href="imagedummy.png"> imagedummy.png</a></li>

I try to render / my fetched data into models etc with the following code:

window.Person = Backbone.Model.extend({});

window.AddressBook = Backbone.Collection.extend({
    url: 'uploads/',// declare url in collection
    model: Person
});

    window.Addresses = new AddressBook();

    window.AppView = Backbone.View.extend({
        el: $('#left_col'),
        initialize: function() {
            Addresses.bind('reset', this.render); // bind rendering to Addresses.fetch()
        },
        render: function(){
            console.log(Addresses.toJSON());
        }
    });

    window.appview = new AppView();
    Addresses.fetch();

but nothing is being rendered or appended to my left column: so --> can I fetch from a directory containing images like this? Also what can I do with the HTML response and how can I load it into models, make it render etc (if there is any way) ?

Answer 1

You should change the HTML response into a JSON format so Backbone can render it properly (although there's a way to display the HTML you have above, this isn't a recommended approach as it's better to render raw data).

You can do something like this:

HTML:

<div id="container">
</div> 
<script id="template" type="text/html">
    <li><img src=<%- dir %><%- image %> /></li>
</script>

JavaScript:

$(function(){
    /** Your response object would look something like this. */
    var json = {'parent_directory': 
                   {'dir_desc': 'Index of /backbone_images/uploads',
        'images': [
            {'dir': '/images/', 'image': 'image1.jpg'}, 
            {'dir': '/images/', 'image': 'image2.jpg'}, 
            {'dir': '/images/', 'image': 'image3.jpg'}
        ]
    }};

    /** Create a simple Backbone app. */
    var Model = Backbone.Model.extend({});

    var Collection = Backbone.Collection.extend({
        model: Model
    });

    var View = Backbone.View.extend({
        tagName: 'ul',
        initialize: function() {
            this.render();
        },
        template: _.template($('#template').html()),
        render: function() {
            _.each(this.collection.toJSON(), function(val){ 
                this.$el.append(this.template({
                    image: val.image, 
                    dir: val.dir}));
            }, this);
            return this;
        }
    });

    /** Create a new collection and view instance. */
    var newColl = new Collection(json.parent_directory.images);
    var newView = new View({collection: newColl});
    $('#container').html(newView.el);
});