index.html

<!-- 
    cache data used for models/collections, saves http requests.
    You can create a custom pre-fetch method to first grab from `__cache__`
    object, and then subsequent requests will use built in fetch() ... or w/e works
-->
<script type="text/javascript">
    window.__cache__ = {};
    __cache__.weather = <%=raw Weather.get_week.to_json %>
</script>


<!-- init weather widget  -->
<script>
  new pine.WeatherWidgetView({ myPreFetch: __cache__.weather });
</script>

weatherWidget.js

// Basic Backbone view that basically just binds an id or class $() to `this.el`
// and also wraps in jquery and stores in `this.$el`. BB views don't have to create
// and render dom nodes... though it's very handy if you need to.
//
pine.OtherWidgetView = new Backbone.view.extends({
  // dom elelment already on page, just caches in this.el
  el: '#other-widget',

    // equivalent of $('#other-widget').on('click', 'alert-button', callback)
  events: {
    'click .alert-button' : 'showAlert',
    'click .hide' : 'hideWidget'
  },

  showAlert: function(e) {
    alert(e.target)
  },

  hideWidget: function() {
    this.$el.toggleClass('is-hidden);
  }
});