openweathermap.org API. Backbone

by Nick Hulea

HTML

<script src="https://rawgithub.com/jashkenas/underscore/1.5.2/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<div>
  <form id="weather_status_form">
    <label for="city">City</label>
    <input type="text" id="weather_city" name="city" /></br>
    <label for="units">Units</label>
    <input type="radio" id="units_metric" name="units" value="metric"/> Metric
    <input type="radio" id="units_imperial" name="units" value="imperial"/> Imperial</br>
    <button>Change</button>
  </form>
  <p id="weather_description"></p>
  <p>Temperature: <span id="weather_temp"></span></p>
  <p>Wind speed: <span id="weather_wind"></span></p>
</div>

CSS

/*

   http://www.lullabot.com/blog/article/move-logic-front-end-angularjs

*/

JavaScript

/**
 * Renders the weather status for a city.
 */
(function ($) {
    
    var City = Backbone.Model.extend({
        url:'http://api.openweathermap.org/data/2.5/weather',
    });

    var WeatherView = Backbone.View.extend({
        el:'#weather_status_form',
        initialize: function() {     
            _.bindAll(this, 'render', 'getStatus');
            this.model = new City();
            this.listenTo(this.model, "change", this.render);
            this.getStatus();
        },
        events: {
          'click button': 'getStatus'
        },
        getStatus: function(){
            this.model.fetch({ data : { q: this.$("#weather_city").val(),
                                        units: this.$('input[name="units"]:checked').val()
                                       }});
          return false;  
        },
        render: function() {
          $('#weather_description').text(this.model.get('weather')[0].description);
          $('#weather_temp').text(this.model.get('main').temp);
          $('#weather_wind').text(this.model.get('wind').speed);
          return this;
        }
        
    });

    // Initialize and trigger first submit
    $('#weather_city').val('Madrid'),
    $('#units_metric').attr('checked', 'checked');
    var view = new WeatherView();
    
    $('button').click();
    
})(jQuery);