Backbone復習

TweetViewで何回もテンプレート処理するのもなんなんでクラスプロパティにキャッシュさせておいて使いまわすようにしてみる。http://qiita.com/items/737f2fe407f5d8d62648

by FiNGAHOLiC

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<h1>Cat Tweet : </h1>
<div id="contents"></div>
<script type="text/template" id="template">
    <span class="user"><%= from_user %></span>
    <span class="text"><%= text %></span>
</script>

CSS

body{ padding:20px; }
h1{ margin-bottom:1em; font-size:20px; font-weight:bold; text-align:center; }
#contents{}
.tweets{}
.tweet{ overflow:hidden; padding:1em; background:#111; border-radius:4px; font-size:12px; _zoom:1; }
.tweet:not(:first-child){ margin-top:1em; }
.user{ margin-right:.5em; display:block; float:left; color:#999; }
.text{ display:block; color:#fff; }

JavaScript

(function($, window, document, undefined){

    // A container for a tweet object
    var Tweet = Backbone.Model.extend({
        initialize : function(){
            this.cid = this.id;
        }
    });

    // A basic view rendering a single tweet
    // see https://dev.twitter.com/docs/api/1/get/search
    var TweetView = Backbone.View.extend({
        tagName : 'li',
        className : 'tweet',
        render : function(){
            var json = this.model.toJSON();
            var html = _.template(TweetView.template, json);
            $(this.el).html(html);
            return this;
        }
    }, {
        // Class property
        template : $('#template').html()
    });

    // A collection holding many tweet objects.
    var Tweets = Backbone.Collection.extend({
        model : Tweet,
        initialize : function(models, options){
            this.query = options.query;
        },
        url : function(){
            return 'http://search.twitter.com/search.json?q=' + this.query + '&callback=?';
        },
        parse : function(res){
            return res.results;
        }
    });

    // A rendering of a collection of tweets
    var TweetsView = Backbone.View.extend({
        tagName : 'ul',
        className : 'tweets',
        initialize : function(){
            _.bindAll(this, 'render');
            this.collection.bind('add', this.render);
        },
        render : function(model){
            var tweetView = new TweetView({
                model : model
            });
            $(this.el).prepend(tweetView.render().el);
            return this;
        }
    });

    // Create a new cat tweet collection
    var catTweets = new Tweets([], {
        query : 'cat'
    });

    // create a view that will contain our tweets
    var catTweetsView = new TweetsView({
        collection : catTweets
    });

    $(function(){

        $('#contents').html(catTweetsView.el);

        var updateTweets = (function(){
           ...