AmplifyJS Demo: Request (AJAX)

Using amplify.request to encapsulate AJAX operations

by cillay

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.19/themes/redmond/jquery-ui.css">
<script src="https://raw.github.com/appendto/amplify/master/core/amplify.core.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<script src="https://raw.github.com/appendto/amplify/master/request/amplify.request.js"></script>
<div id="input">
    <input id="txtUsername" type="text" value="aisteam" class="ui-corner-all" />
    <button id="btnGetUser" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">Get User Details</button>
</div>
<div id="output"></div>
<div id="details"></div>
<script id="tmplProfile" type="text/x-ejs">
<img src="<%= user.profile_image_url.replace('normal', 'reasonably_small') %>" />
<p>
    <%= user.screen_name %><br />
    <small><%= user.location %></small><br />
    <small><%= user.followers_count %> followers</small><br />
</p>
</script>

CSS

body {
    padding: 20px;
    font: normal 0.85em 'Segoe UI', Verdana, Arial, sans-serif;
}

#output li {
    border: 1px solid cornflowerblue;
    padding: 10px;
    margin-top: 15px;
}

button {
    font-size: bold 16px 'Segoe UI', Verdana !important;
    padding: 4px !important;
    height: 31px;
    position: relative;
    top: 1px;
}

#output {
    display: block;
    width: 75%;
    float: left;
}

#details {
    border: 1px solid cornflowerblue;
    padding: 10px;
    margin-top: 15px;
    display: block;
    width: 20%;
    float: right;
    min-height: 250px;
    display: none;
}

#details p {
    font-size: 1.15em;
    font-weight: bold;
}

#details small {
    font-size: 0.65em;
    font-weight: normal;
}

#txtUsername {
    height: 28px;
    line-height: 24px;
    margin-top: 4px;
    background-image: url('http://a0.twimg.com/profile_images/1884991115/at-sign_mini.png');
    background-clip: border-box;
    background-color: white;
    background-repeat: no-repeat;
    background-position: 3px 3px;
    padding-left: 26px;
    font: normal 24px Arial, sans-serif;
    color: #333;
    display: inline-block;
    position: relative;
    top: 2px;
}
#output li {
  /* fallback */
  background-color: #FAFAFF;
  
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C9E4FF), to(#FDFDFF));
  
  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #C9E4FF, #FDFDFF);
  
  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #C9E4FF, #FDFDFF);
  
  /* IE 10 */
  background: -ms-linear-gradient(top, #C9E4FF, #FDFDFF);
  
  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #C9E4FF, #FDFDFF);
}

#output {
    display: none;
}

#details {
    width: 75%;
    font-size: 150%;
    float: left;
}

JavaScript

/* FORM
 ****************************************************************************************/
$(function() {
    $('#btnGetUser').bind('click', function() {
        amplify.publish('UserSelected', $('#txtUsername').val());
    });
});
        
/* DATA
 ****************************************************************************************/
$(function() {
    var getTwitterUser = function(user) { 
        amplify.request('GetUser', { username: String(user) }, function(data) {
            amplify.publish('UserDetails', data);
        });
    };
    amplify.subscribe('UserSelected', function(user) {
        getTwitterUser(user);
    });
});

/* PRESENTATION
 ****************************************************************************************/
$(function() {
    var profileTemplate = _.template($('#tmplProfile').html());
    var showUser = function(user) {
        var profile = profileTemplate({ user: user }); 
        $('#details').hide().addClass('ui-corner-all').empty().append(profile).fadeIn(900);  
    };
    ////amplify.subscribe('UserDetails', function(tweets) {
    ////    showUser(tweets.length ? tweets[0].user : null);
    ////});
    amplify.subscribe('UserDetails', function(user) {
        showUser(user);
    });
});

/* AJAX REQUESTS
 ****************************************************************************************/
$(function () {
    var parseUser = function (data, status, xhr, success, error) {
        var user = null;
        if (data && data != null) {
            for (var i = 0; i < data.length; i++) {
                for (var prop in data[i]) {
                    if (prop.substr(prop.length - 4).toLowerCase() === 'user') {
                        user = data[i][prop];
                        break;
                    }
                }
                if (user) {
                    break;
                }
            }
            success(user);
        }
        else {
            error(data);
        }
    };
    
   ...