Backbone Subviews - Reset Collection on click

Backbone Subviews - Reset Collection on click

by Nirvanachain

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script type="text/template" id="List">
    <button class="js-button">Click for the next page</button>
    <% console.log('templates collection=',collection) %>
    <ul class="js-listContainer">
        
    </ul>       
</script>
                
<script type="text/template" id="ListItem">
    <% _.each(collection, function (element, index) { %>
        <% _.each(element.photos.photo, function(ele, i) { %>
            <li>
                <img src="http://farm<%- ele.farm %>.staticflickr.com/<%- ele.server %>/<%- ele.id %>_<%- ele.secret %>_m.jpg" />
            </li>
        <% }); %>
    <% }); %>
</script>
                
<div class="js-container">
    
</div>

CSS

ul > * {
    display: inline-block;
    vertical-align: top;
    width: 25%;
}

img {
    position: relative;
    width: 100%;
    transition: opacity 0.5s ease-in-out;
    -webkit-backface-visibility: hidden;
}

img:hover {
    cursor: pointer;
    opacity: 0.5;
}

JavaScript

var urlParameters = {
    page: 1,
    api_key:'a2978e5ce30c337e3b639172d3e1a0d1',
    tags: 'cats',
    method: 'flickr.photos.search',
    per_page: 3,
    format: 'json'
};

var TheModel = Backbone.Model.extend({
    default: {
        photos: '',
        stat: ''   
    }
});

var TheCollection = Backbone.Collection.extend({
    model: TheModel,

    url: 'http://api.flickr.com/services/rest'

});

var TheView = Backbone.View.extend({
    el: '.js-container',
    
    initialize: function () {
        this.collection = new TheCollection();
        this.subView = new SubView({collection: this.collection});
        this.fetchData();

        this.listenTo(this.collection, 'reset', this.render);
        
        return this;
    }, 
    
    render: function () {        
        var temp = _.template( $('#List').html(), {collection: this.collection.toJSON()} );      
        this.$el.html(temp);   
        
        this.subView.setElement('.js-listContainer').render();
        return this;
    },
    
    fetchData: function () {
        var self = this;
        this.collection.fetch({
            reset: 'true',
            type: 'GET',
            dataType:'jsonp',
            data: urlParameters,
            jsonp:'jsoncallback',
            success: function (data) {
               console.log('self.collection =',self.collection); 
            },
            error: function () {
                console.log('ERROR!!!');
            }
        });    
        
        return this;
    },
    
    events: {
        'click .js-button': 'nextPage'   
    },
    
    nextPage: function () {
        urlParameters.page = urlParameters.page + 1;
        this.fetchData();
        
        return this;
    }
    
});

var SubView = Backbone.View.extend({

    render: function () {        
        var temp = _.template( $('#ListItem').html(), {collection: this.collection.toJSON()} );      
        this.$el.html(temp);   
        
        return this;
    },
    
   ...