BackboneJS Flicker onChange Example

BackboneJS Flicker onChange Example

by Nirvanachain

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script id="target-template" type="text/template">
    <% _.each(collection, function(element, i) { %>
        <select>
            <% _.each(element.photos.photo, function(ele, index) { %>
                <option data-number="<%- index + 1 %>">
                    <%- ele.title %>
                </option>
            <% }); %>
        </select>
    <% }); %>
</script>

<div class="js-container"> </div>

JavaScript

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

var TheCollection = Backbone.Collection.extend({
    model: TheModel,
    
    url: 'http://api.flickr.com/services/rest/?page=1&api_key=a2978e5ce30c337e3b639172d3e1a0d1&tags=candy&method=flickr.photos.search&per_page=3&format=json&jsoncallback=?'
    
});

var myCollection = new TheCollection();

var TheView = Backbone.View.extend({
    el: '.js-container',
    
    initialize: function () {
        this.render()
    },
    
    template: _.template( $('#target-template').html() ),

    events: {
        "change select": "setSelectedItem"
    },

    render: function() {
        var self = this;
        
        this.collection.fetch({
            dataType: 'jsonp',
            success: function (data) {
                console.log( 'self.collection.toJSON() =', self.collection.toJSON() );
                self.$el.html( self.template( { collection: self.collection.toJSON() } ) );
            }
        });
        
        return this;
    },

    setSelectedItem: function(event) {
        var selected = $(event.currentTarget),
            selectedValue = selected.find('option').filter(':selected').data().number;
        
        console.log(selectedValue);
         
        return selectedValue;
    }
});

var myView = new TheView({collection: myCollection});
myView;