Amplify - jQuery

by johnpapa

HTML

<script src="https://raw.github.com/appendto/amplify/master/core/amplify.core.js"></script>
<script src="https://raw.github.com/appendto/amplify/master/store/amplify.store.js"></script>
<script src="https://raw.github.com/appendto/amplify/master/request/amplify.request.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<script src="https://raw.github.com/mennovanslooten/mockJSON/master/js/jquery.mockjson.js"></script>
<script src="https://raw.github.com/timrwood/moment/1.5.0/min/moment.min.js"></script>
<form class="well">
  <label for="userName">User Name</label>
  <input id="userName" type="text" class="span3" placeholder="Enter Name Here…">
  <button type="submit" class="btn btn-primary" id="getButton">Get Tweets</button>
  <button class="btn" id="clearButton">Clear</button>
</form>
<ul class="tweets"></ul>

CSS

.well { margin-top: 15px; }

JavaScript

// Define what a getTweets request looks like... url, dataType, etc
// Typically put all of these in their own script file
amplify.request.define( "getTweets", "ajax", {
    url: "http://twitter.com/status/user_timeline/{userName}.json?count={count}&callback=?",
    dataType: "json",
    type: "GET"
});

// Uncomment this to redefine the getTweets request with hard-coded data
// Typically put all of these mock definitions in their own script file
/*
amplify.request.define( "getTweets", function ( settings ) {
    settings.success([
        { id: 0, created_at: "Mon Apr 11 8:00:00 +0000 2012", text: "Test Tweet 1", favorited: false, retweeted: false, user: { name: "User 1" } },
        { id: 1, created_at: "Mon Apr 11 9:00:00 +0000 2012", text: "Test Tweet 2", favorited: true, retweeted: true, user: { name: "User 2" } },
        { id: 2, created_at: "Mon Apr 11 10:00:00 +0000 2012", text: "Test Tweet 3", favorited: false, retweeted: true, user: { name: "User 3" } },
        { id: 3, created_at: "Mon Apr 11 11:00:00 +0000 2012", text: "Test Tweet 4", favorited: true, retweeted: false, user: { name: "User 4" } },
        { id: 4, created_at: "Mon Apr 11 12:00:00 +0000 2012", text: "Test Tweet 5", favorited: true, retweeted: true, user: { name: "User 5" } },
    ]);    
});
*/

// Uncomment this to redefine the getTweets request with prototype data
/*
amplify.request.define( "getTweets", function ( settings ) {
    var mockData = $.mockJSON.generateFromTemplate({
        "tweets|2-4": [{
            "id|+1": 0, 
            "created_at": "Mon Apr 11 @TIME_HH:@TIME_MM:@TIME_SS +0000 2012",
            "text": "@LOREM_IPSUM",
            "favorited|0-1": false,
            "retweeted|0-1": false,
            "user": { "name": "@MALE_FIRST_NAME @LAST_NAME" }
        }]
    });
    
    settings.success( mockData.tweets );  
});
*/

(function( twitter, $, undefined ) {

    twitter.init = function() {
        amplify.subscribe( "tweets.available", function( tweets ) {
  ...