Flickr Commons Tagger

Playing around with backbone.js. Flickr Commons needs help tagging historical photos. This app will randomly pull a commons photo, display the current tags, and accept new tags from the user.

by clayzermk1

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<a href="http://backbonejs.org/docs/todos.html">Todo</a>
<br />

<div id="content"></div>
<ul id="tags"></ul>

JavaScript

/* Backbone models */
var PhotoModel = Backbone.Model.extend({
    initialize: function() {
        // Get the random photo.
        $.ajax({
            url: 'http://api.flickr.com/services/rest/?api_key=bd8bff54025e3372c0f57fbf860080ef&format=json&nojsoncallback=1&method=flickr.photos.search&per_page=100&is_commons=true',
            async: false,
            context: this,
            dataType: 'json',
            success: function(resp) {
                var rp = resp.photos.photo[Math.floor(Math.random() * 100)];
                // Build the model's URL.
                this.url = 'http://farm' + rp.farm + '.staticflickr.com/' + rp.server + '/' + rp.id + '_' + rp.secret + '_m.jpg';
        
                // Copy the picture's data to the model.
                _.extend(this, rp);
            }
        });
    }
});

var TagModel = Backbone.Model;

/* Backbone collections */
var TagsCollection = Backbone.Collection.extend({
    model: TagModel,
    parse: function(resp) {
        debugger;
        // Copy the picture's data to the collection.
        return resp.photo.tags.tag;
    }
});

/* Backbone Views */
var ImageView = Backbone.View.extend({
    el: '#content',
    render: function() {
        debugger;
        $(this.el).html('<img src="' + this.model.url + '" /><h4>' + this.model.title + '</h4>');
        return this;
    }
});

var TagsView = Backbone.View.extend({
    el: '#tags',
    render: function() {
        debugger;
        $(this.el).html(_.template('\
            <% debugger %>\
            <% _.each(this, function(tag) { %>\
            <li><%= tag.raw %></li>\
            <% }) %>\
            ',
            this.collection
        ));
        return this;
    }
});

/* Main */
var p = new PhotoModel();
var i = new ImageView({model: p});
i.render();

var t = new TagsView({collection: new TagsCollection()});
t.collection.url =...