MaffooBristol/jsbin.modot.coffee

## jsbin.modot.coffee
# Encapsulate our stuff within an app variable.
app = {}

# Define our model- this will mostly just define default values.
app.model = Backbone.Model.extend
  defaults:
    coords:  {}
    sys:     {}
    weather: {}
    # etc

# Define our collection and set its url and the associated model.
app.collection = Backbone.Collection.extend
  url: 'http://api.openweathermap.org/data/2.5/weather?q=Bristol,uk'
  model: app.model
  # Uncomment this line to 'drill down' into it, as an example.
    # parse: (x) -> x['coord']

# Now we define a controller. This is actually not part of
# Backbone itself, but will be called whenever we want to
# receive the data. It uses jQuery defers to make sure that
# the collection has fetched before we try and manipulate the
# data. It also will return a cached copy of the data if we
# hit the function a second or more time.
app.controller =
  getData: () ->
    # First set our defer value- this is just a jQuery fn.
    defer = $.Deferred()
    # Resolve the data if it exists and return its promise.
    if @data != undefined and @data.length > 0
      defer.resolve @data
      return defer.promise()
    # Instantiate our collection.
    @data = new app.collection()
    # Now we fetch the data and wait for success...
    @data.fetch
      success: (_data) =>
        # Here we resolve the data inside the success callback.
        defer.resolve @data

    # When this function is called, the promise is returned.
    # It won't actually kick the next bit off (see the following
    # $.when() code) until our defer.resolve() is fired.
    return defer.promise()


# You can get the data like so......

# First define our promise...
promise = app.controller.getData()

# ...and then wait for the callback when the data is received.
$.when(promise).done (data) =>
  console.log data # Returns a collection object.


# Alternatively, inside a view declaration:
app.view = Backbone.View.extend
  # When initialised, set the view's collection
  # to being the fetched data.
  initialize: () ->
    response = app.controller.getData()
    $.when(response).done (data) =>
      @collection = data
      @render()
  render: () ->
    # Now we've got everything, the render function
    # can actually do something with our @collection.
    # ...eg:
    $('#output').html JSON.stringify @collection

# Now we instantiate our view, which should kick off the
# app.controller.getData() method, but since we have already
# fetched it once, it will return our cached collection.
myView = new app.view()


# Lots of love, Matt xxx

## jsbin.modot.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/coffee-script/1.7.1/coffee-script.min.js"></script>
<script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
<script src="http://jashkenas.github.io/backbone/backbone-min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <div id='output'>Waiting...</div>

</body>
</html>
	# Encapsulate our stuff within an app variable.
	app = {}

	# Define our model- this will mostly just define default values.
	app.model = Backbone.Model.extend
	defaults:
	coords: {}
	sys: {}
	weather: {}
	# etc

	# Define our collection and set its url and the associated model.
	app.collection = Backbone.Collection.extend
	url: 'http://api.openweathermap.org/data/2.5/weather?q=Bristol,uk'
	model: app.model
	# Uncomment this line to 'drill down' into it, as an example.
	# parse: (x) -> x['coord']

	# Now we define a controller. This is actually not part of
	# Backbone itself, but will be called whenever we want to
	# receive the data. It uses jQuery defers to make sure that
	# the collection has fetched before we try and manipulate the
	# data. It also will return a cached copy of the data if we
	# hit the function a second or more time.
	app.controller =
	getData: () ->
	# First set our defer value- this is just a jQuery fn.
	defer = $.Deferred()
	# Resolve the data if it exists and return its promise.
	if @data != undefined and @data.length > 0
	defer.resolve @data
	return defer.promise()
	# Instantiate our collection.
	@data = new app.collection()
	# Now we fetch the data and wait for success...
	@data.fetch
	success: (_data) =>
	# Here we resolve the data inside the success callback.
	defer.resolve @data

	# When this function is called, the promise is returned.
	# It won't actually kick the next bit off (see the following
	# $.when() code) until our defer.resolve() is fired.
	return defer.promise()


	# You can get the data like so......

	# First define our promise...
	promise = app.controller.getData()

	# ...and then wait for the callback when the data is received.
	$.when(promise).done (data) =>
	console.log data # Returns a collection object.


	# Alternatively, inside a view declaration:
	app.view = Backbone.View.extend
	# When initialised, set the view's collection
	# to being the fetched data.
	initialize: () ->
	response = app.controller.getData()
	$.when(response).done (data) =>
	@collection = data
	@render()
	render: () ->
	# Now we've got everything, the render function
	# can actually do something with our @collection.
	# ...eg:
	$('#output').html JSON.stringify @collection

	# Now we instantiate our view, which should kick off the
	# app.controller.getData() method, but since we have already
	# fetched it once, it will return our cached collection.
	myView = new app.view()


	# Lots of love, Matt xxx
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/coffee-script/1.7.1/coffee-script.min.js"></script>
	<script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
	<script src="http://jashkenas.github.io/backbone/backbone-min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>

	<div id='output'>Waiting...</div>

	</body>
	</html>