Ember.js: Easy setup to set document title + having a heading view containing the same title using a subclass of Ember.Route

index.html

<script type="text/x-handlebars" data-template-name="title">
	{{view.title}}
</script>

<script type="text/x-handlebars">
	<header class="topbar">{{view App.TitleView}}</header>
</script>

site.coffee

# Super-class AppRoute

AppRoute = Ember.Route.extend

	renderTemplate: (controller, model) ->
		this.render()
    
		pageTitle = if this.title then this.title controller, model else null
		document.title = if pageTitle then "#{pageTitle} – Pimfy" else "Pimfy"
		App.TitleView.set 'isDefaultTitle', !pageTitle # Get for free the 'is-default-title' CSS class when no specific title is set
		App.TitleView.set 'title', pageTitle
    
		return

# Other routes

App.IndexRoute = AppRoute.extend
	
	model: () ->
		return App.Page.find()

App.PageRoute = AppRoute.extend
  
	model: (params) ->
		return App.Page.find params.page_id
		
	title: (controller, model) ->
		return controller.get('title')

# View Title, this is used to keep a topbar containing the page title

TitleView = Ember.View.extend
	tagName: 'h1' # as a page title, H1 makes sense
	classNames: ['title'] # whatever class you want your heading to have
	classNameBindings: ['isDefaultTitle'] # get is-default-title CSS class when no title is set
	isDefaultTitle: true

App.TitleView = TitleView.create
	templateName: 'title'