jo/README

## README
Backbone Current Model Experiments

You have already fetched a collection of pages.
There is a list view and a show view.
The user selects a page in the list view,
and the corresponding page view is shown.

## app.js
var Pages = {
  models: {},
  collections: {},
  views: {},
  routers: {}
};

## index.html
<!DOCTYPE html>
<html lang=en>
  <head>
    <meta charset=utf-8 />
    <title>Backbone Current Model Experiments</title>
    <meta name=author content="Johannes J. Schmidt, TF, Berlin">
    <meta name=viewport content="width=device-width,user-scalable=no">
    <meta name=apple-mobile-web-app-capable content=yes>
    <link href=style.css rel=stylesheet charset=utf-8>
    <script src=http://code.jquery.com/jquery-1.7.2.min.js></script>
    <script src=http://documentcloud.github.com/underscore/underscore-min.js></script>
    <script src=http://backbonejs.org/backbone-min.js></script>
    <script src=app.js></script>
    <script src=page.js></script>
    <script src=pages.js></script>
    <script src=list.js></script>
    <script src=show.js></script>
    <script src=router.js></script>
  </head>
  <body>
    <h1>Backbone Current Model Experiments</h1>
    <div id=list></div>
    <div id=show></div>
    <script>
      new Pages.Router();

      Backbone.history.start()
    </script>
  </body>
</html>

## list.js
Pages.List = Backbone.View.extend({
  initialize: function(options) {
    this.pages = options.pages;

    this.pages.on('reset', this.render, this);
  },

  render: function() {
    console.log('render list');

    this.$el.html(this.pages.map(function(page) {
      return '<a href=#' + page.id + '>' + page.get('title') + '</a>';
    }).join('<br>'));

    return this;
  }
});

## page.js
Pages.Page = Backbone.Model.extend();

## pages.js
Pages.Pages = Backbone.Collection.extend({
  model: Pages.Page,
  url: 'pages.json',

  initialize: function(models, options) {
    this.on('reset', this.updateCurrent, this);
  },

  setCurrent: function(id) {
    this.currentId = id;
    this.updateCurrent();
  },

  updateCurrent: function() {
    this.current = this.get(this.currentId);
  }
});

## pages.json
[
  {
    "id": 1,
    "title": "I beat the other Friday",
    "text": "into bright bucket."
  },
  {
    "id": 2,
    "title": "Mr. Tom",
    "text": "Dear Weltraum alone, thought you'd never go, oh oh oh"
  },
  {
    "id": 3,
    "title": "What you think?",
    "text": "Paris."
  }
]

## router.js
Pages.Router = Backbone.Router.extend({
  routes: {
    '': 'list',
    ':id': 'show'
  },

  initialize: function() {
    this.pages = new Pages.Pages();

    this.views = {
      list: new Pages.List({
        el: '#list',
        pages: this.pages
      }),
      show: new Pages.Show({
        el: '#show',
        pages: this.pages
      })
    };

    this.pages.fetch();
  },

  list: function() {
    this.views.list.render();
  },

  show: function(id) {
    this.pages.setCurrent(id);
    this.views.show.render();
  }
});

## show.js
Pages.Show = Backbone.View.extend({
  initialize: function(options) {
    this.pages = options.pages;

    this.pages.on('reset', this.render, this);
  },

  render: function() {
    console.log('render show');

    if (!this.pages.current) {
      return;
    }

    this.$el.html('<h2>' + (this.pages.current.get('title') || 'untitled') + '</h2>' + '<p>' + this.pages.current.get('text') + '</p>' + ' <a href=#>back</a>');

    return this;
  }
});

## style.css
body {
  margin: 1cm 1.618cm;
}
p {
  max-width: 40em;
}
	Backbone Current Model Experiments

	You have already fetched a collection of pages.
	There is a list view and a show view.
	The user selects a page in the list view,
	and the corresponding page view is shown.
	var Pages = {
	models: {},
	collections: {},
	views: {},
	routers: {}
	};
	<!DOCTYPE html>
	<html lang=en>
	<head>
	<meta charset=utf-8 />
	<title>Backbone Current Model Experiments</title>
	<meta name=author content="Johannes J. Schmidt, TF, Berlin">
	<meta name=viewport content="width=device-width,user-scalable=no">
	<meta name=apple-mobile-web-app-capable content=yes>
	<link href=style.css rel=stylesheet charset=utf-8>
	<script src=http://code.jquery.com/jquery-1.7.2.min.js></script>
	<script src=http://documentcloud.github.com/underscore/underscore-min.js></script>
	<script src=http://backbonejs.org/backbone-min.js></script>
	<script src=app.js></script>
	<script src=page.js></script>
	<script src=pages.js></script>
	<script src=list.js></script>
	<script src=show.js></script>
	<script src=router.js></script>
	</head>
	<body>
	<h1>Backbone Current Model Experiments</h1>
	<div id=list></div>
	<div id=show></div>
	<script>
	new Pages.Router();

	Backbone.history.start()
	</script>
	</body>
	</html>
	Pages.List = Backbone.View.extend({
	initialize: function(options) {
	this.pages = options.pages;

	this.pages.on('reset', this.render, this);
	},

	render: function() {
	console.log('render list');

	this.$el.html(this.pages.map(function(page) {
	return '<a href=#' + page.id + '>' + page.get('title') + '</a>';
	}).join('<br>'));

	return this;
	}
	});
	Pages.Pages = Backbone.Collection.extend({
	model: Pages.Page,
	url: 'pages.json',

	initialize: function(models, options) {
	this.on('reset', this.updateCurrent, this);
	},

	setCurrent: function(id) {
	this.currentId = id;
	this.updateCurrent();
	},

	updateCurrent: function() {
	this.current = this.get(this.currentId);
	}
	});
	[
	{
	"id": 1,
	"title": "I beat the other Friday",
	"text": "into bright bucket."
	},
	{
	"id": 2,
	"title": "Mr. Tom",
	"text": "Dear Weltraum alone, thought you'd never go, oh oh oh"
	},
	{
	"id": 3,
	"title": "What you think?",
	"text": "Paris."
	}
	]
	Pages.Router = Backbone.Router.extend({
	routes: {
	'': 'list',
	':id': 'show'
	},

	initialize: function() {
	this.pages = new Pages.Pages();

	this.views = {
	list: new Pages.List({
	el: '#list',
	pages: this.pages
	}),
	show: new Pages.Show({
	el: '#show',
	pages: this.pages
	})
	};

	this.pages.fetch();
	},

	list: function() {
	this.views.list.render();
	},

	show: function(id) {
	this.pages.setCurrent(id);
	this.views.show.render();
	}
	});
	Pages.Show = Backbone.View.extend({
	initialize: function(options) {
	this.pages = options.pages;

	this.pages.on('reset', this.render, this);
	},

	render: function() {
	console.log('render show');

	if (!this.pages.current) {
	return;
	}

	this.$el.html('<h2>' + (this.pages.current.get('title') \|\| 'untitled') + '</h2>' + '<p>' + this.pages.current.get('text') + '</p>' + ' <a href=#>back</a>');

	return this;
	}
	});