gistfile1.js

Backbone.Cloudant.database = "/sandbox/";
// start the change handler
// Backbone.Cloudant.changeHandler();


PeopleView = Backbone.View.extend({
    initialize: function () {
	this.listenTo(this.collection, 'reset', this.render);
    },
    template: _.template($("#person_template").html()),
    
    render: function() {
	this.addAll();
	return this;
    },

    addOne: function(person) {
	// var view = new app.PersonView({ model: person });
	// foo = person.toJSON();
	foo = person.attributes;
	// this.$('#person-list').append( foo );
	bar = this.template(foo);
	this.$el.append( bar);


    },
    addAll: function() {
	this.$('#person_container').html('');
	this.collection.each(this.addOne, this);
    }
}
);

// PersonView = Backbone.View.extend({
//     render: function() {
	
//     }
// })


var all_docs = new Backbone.Cloudant.Docs.Collection();
var all_docs_view = new PeopleView({collection: all_docs, id: '#person_container'});


all_docs.fetch().fail(function(){console.log('Could not load all_docs collection');});

gistfile2.html

<script src="jquery/jquery-1.9.0.full.js"></script>
<script src="underscore/underscore-1.4.4.full.js"></script>
<script src="backbone/backbone-0.9.10.full.js"></script>
<script src="cloudant/backbone.cloudant-0.0.1.full.js"></script>


<script type="text/template" id="person_template">
<li><%= _id %> | <%= key %></li>
</script>
HELLOW WORLD


<div id="person_container">
SPQR!

  <ul id="person-list"></ul>


</div>


<script src="js/app2.js"></script>