Weather Demo

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/postal.js/0.8.5/postal.min.js"></script>
<div id="weather">
</div>

JavaScript

var Weather = function() {
	this.channel = postal.channel( "weather" );
    this.channel.subscribe( "fetch", this.fetch ).withContext( this );
};

_.extend(Weather.prototype, {
    fetch: function( city ) {
     	$.ajax({
            url: "http://cibcmobilelive.mockable.io/api/fxcashes",
            dataType: "jsonp",
            success: _.bind(function( data ) {
                this.channel.publish( "fetched", "manish");
            }, this )
        });   
    }
});

var weather = new Weather();

var App = function() {
  	this.channel = postal.channel( "weather" );  
    this.channel.subscribe( "fetched", this.gotWeather ).withContext( this );
};

_.extend(App.prototype, {
    getWeather: function( city ) {
        this.channel.publish( "fetch", city );
    },
    gotWeather: function( data ) {
        console.log( "weather retrieved" );
    }
});

var UI = {
    init: function() {
        postal.channel( "weather" ).subscribe( "fetched", this.showWeather );        
    },
    showWeather: function( data ) {
        var weather = data.weather[0],
            displayWeather = "";
        
        displayWeather += "<p>The wather in " + data.name + " is " + weather.description + ".</p>";
        displayWeather += "<p>The wind is " + data.wind.speed + "mpg, with gusts of " + data.wind.gust + ".</p>";
        $( "#weather" ).html( displayWeather );
    }
};

var app = new App();
UI.init();
app.getWeather( "Thompsons station, tn" );