cuppster/1.js

## 1.js
/**
 * Shared Collections for backbone.js
 */

// shared collection
// useful when the user may enter the site in multiple routes/views,
// but use the same collection
var SharedCollection = function(collection) {

  var obj         = this;
  this.deferred   = $.Deferred();
  this.promise    = this.deferred.promise();
  this.collection = collection;

  this.fetch = function() {
    obj.collection.fetch({
      success: function(c, r) {
        obj.deferred.resolve(c);
      },
      error: function(e) {
        console.error(e);
        obj.deferred.reject(c);
      }
    });
  };

  this.stale = function() {
    this.deferred   = $.Deferred();
    this.promise    = this.deferred.promise();
  };

  return this;
};

// single place view
//
var PlaceView = Backbone.View.extend({
  render: function() {
    this.$el.html('place');
    return this;
  },
});

// places view
//
var PlacesView = Backbone.View.extend({
  render: function() {
    var view = this;
    this.collection.each(function(model) {
      var placeView = new PlaceView({model: model});
      view.$el.append(placeView.render().el);
    });
  }
});

// use geonames API to get a list of places
//
var Places = Backbone.Collection.extend({

  url: 'http://api.geonames.org/citiesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&lang=de&username=demo',

  parse: function(response) {
    return response.geonames;
  },

});

// ready to work...
//
$(document).ready(function() {

  var places = new Places;

  // create and fetch the collection
  var sharedPlaces = new SharedCollection(places)
  sharedPlaces.fetch();

  // setting these now is OK, still works ;)
  sharedPlaces.promise.done(function(c) {
    var view = new PlacesView({el: $('#places'), collection: places});
    view.render();
  });
  sharedPlaces.promise.fail(function() {
    alert('failed to get collection');
  });

});

## 2.html
<html>
  <head>
  </head>
  <body>

    <ul id="places"></ul>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery-1.8.0.min.js" type="application/javascript" ></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="application/javascript" ></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="application/javascript" ></script>
    <script src="./places.js" type="application/javascript" ></script>
  </body>
</html>
	/**
	* Shared Collections for backbone.js
	*/

	// shared collection
	// useful when the user may enter the site in multiple routes/views,
	// but use the same collection
	var SharedCollection = function(collection) {

	var obj = this;
	this.deferred = $.Deferred();
	this.promise = this.deferred.promise();
	this.collection = collection;

	this.fetch = function() {
	obj.collection.fetch({
	success: function(c, r) {
	obj.deferred.resolve(c);
	},
	error: function(e) {
	console.error(e);
	obj.deferred.reject(c);
	}
	});
	};

	this.stale = function() {
	this.deferred = $.Deferred();
	this.promise = this.deferred.promise();
	};

	return this;
	};

	// single place view
	//
	var PlaceView = Backbone.View.extend({
	render: function() {
	this.$el.html('place');
	return this;
	},
	});

	// places view
	//
	var PlacesView = Backbone.View.extend({
	render: function() {
	var view = this;
	this.collection.each(function(model) {
	var placeView = new PlaceView({model: model});
	view.$el.append(placeView.render().el);
	});
	}
	});

	// use geonames API to get a list of places
	//
	var Places = Backbone.Collection.extend({

	url: 'http://api.geonames.org/citiesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&lang=de&username=demo',

	parse: function(response) {
	return response.geonames;
	},

	});

	// ready to work...
	//
	$(document).ready(function() {

	var places = new Places;

	// create and fetch the collection
	var sharedPlaces = new SharedCollection(places)
	sharedPlaces.fetch();

	// setting these now is OK, still works ;)
	sharedPlaces.promise.done(function(c) {
	var view = new PlacesView({el: $('#places'), collection: places});
	view.render();
	});
	sharedPlaces.promise.fail(function() {
	alert('failed to get collection');
	});

	});
	<html>
	<head>
	</head>
	<body>

	<ul id="places"></ul>

	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery-1.8.0.min.js" type="application/javascript" ></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="application/javascript" ></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="application/javascript" ></script>
	<script src="./places.js" type="application/javascript" ></script>
	</body>
	</html>