Tbpgr Blog

元エンジニア 人事 tbpgr(てぃーびー) のブログ

backborn.js | underscore.jsのwrapを利用してフック付きのViewを作成し、フラッシュメッセージを実装する

概要

underscore.jsのwrapを利用してフック付きのViewを作成する

詳細

underscore.jsのwrapを利用してフック付きのViewを作成します。
複数画面共通の処理や、開発用のデバッグトレースの出力、
フラッシュメッセージの実装などに利用可能。

サンプル

フック付きView(coffee script)
class @ExtendedBackBoneView extends Backbone.View

  constructor: (options = {}) ->
    super
    @render = _.wrap @render, (render) =>
      @before_render()
      render()
      @after_render()
      @
  
  before_render: () => 
    console.log 'before_render'
    console.log @model

  
  render: () =>
    console.log 'parent_render'
    @
  
  after_render: () =>
    window.notice = ''
    console.log 'after_rdender'
利用側

継承元にExtendedBackBoneViewを指定するだけ。
画面AのViewの任意の処理時に

window.notice = 'message'

を設定します。遷移先の画面にいくとレンダリング終了後に基底クラスの
after_renderが実行されるためメッセージは1度しか表示されません。

実行時コンソールログ
before_render
parent_render
after_rdender