Vue.jsとPage.jsでページ遷移に合わせてタイトルを変える

Vue.jsとPage.jsを組み合わせて使う場合に，ページ遷移に応じてタイトルバーを変える方法を考えてみました．Gistnote ではこの方法を使っています．

Why?

Page.jsでページが遷移するとブラウザに履歴が残ります．履歴のタイトルがすべて同じだと分かりにくいので，ページの内容に合わせたタイトルを付けましょう．

TLDR

ViewModelにページタイトルのプロパティを追加します．それを監視して，プロパティが変更される度に document.title に反映します．

ViewModelの状態に応じてページタイトルのプロパティを計算すれば動的にタイトルを変更できます．

How?

まず，ViewModelにページタイトルのプロパティ pageTitle を追加します．このプロパティはComputed Propertyにしておき、他のプロパティに応じてページタイトルを計算します。

vm = new Vue
  data:
    description: null
    state: 'loading'
  computed:
    pageTitle: -> switch @state
      when 'new'  then "New Gist | MyApp"
      when 'view' then "#{@description} | MyApp"
      when 'edit' then "#{@description} | MyApp"
      else             'MyApp'

そして，pageTitle が変更されたら document.title を変更します。

vm = new Vue
  created: ->
    @$watch 'pageTitle', -> document.title = @pageTitle

最後に，Page.jsのルーティングを定義します．

vm = new Vue
  methods:
    newGist:  (id) -> @state = 'new'
    openGist: (id) -> @state = 'view'
    editGist: (id) -> @state = 'edit'
    openTop:  (id) -> @state = 'top'

page '/new',                -> vm.newGist()
page '/:id',      (context) -> vm.openGist context.params.id
page '/:id/edit', (context) -> vm.editGist context.params.id
page                        -> vm.openTop()