Simple gist list

Step #1 of gist based blog is to retreive the blog entries!

by davidhong

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<section id="articles"></section>

<script type="text/template" id="t-article">
    <article>
        <header>
            <h2>{{ description }}</h2>
            <small>{{ comments }} comments</small>
        </header>
    </article>
</script>

CSS

html, body {
    font: 16px/26px Georgia, Times New Roman, serif;
}

article header {
    text-align: center;
}

article header h2 {
    font-size: 150%;
}

article header small {
    font-size: 80%;
}

CoffeeScript

_.templateSettings = 
    interpolate : /\{\{(.+?)\}\}/g

class Gist extends Backbone.Model
    
class Gists extends Backbone.Collection
    
    initialize: ->
        @fetch
            update: true
    
    model: Gist
    
    url: ->
        'https://api.github.com/users/hongymagic/gists'
        
class Articles extends Backbone.View
    
    el: $ '#articles'
    compiled: _.template($('#t-article').text())
    
    initialize: ->
        _.bindAll @
        
        @collection = new Gists
        @collection.on 'add', @add, @
        
        @render()
        
    render: ->
        $(@el)
    
    add: (article) ->
        $(@el).append @compiled article.toJSON()
        
view = new Articles