Backbone.jsは便利なフレームワークですが、ちょっとしたものを作ろうと思った時には大袈裟だったり、複雑そうに見えて腰が引けてしまうかも知れません。実際のところ十分分かりやすいとは思うのですが、モデルやコレクションが絡むと確かに複雑さを増す気がします。 そこでちょっとしたビューとイベントの管理だけをしたい場合にお勧めなフレームワークがHorn.jsです。

サンプルコード

ちょっと長いですがコードを載せます。

# カスタムの命令定義部
Horn.addDirective "data-click-with-trigger", (view) ->
  $el = view.$("[data-click-with-trigger]")
  $el.on 'click', (e) =>
    eventName = $(e.target).data('click-with-trigger')
    view.trigger eventName

# ビュー部分。別なテンプレートエンジンも使えます。
Horn.registerTemplate """
  <div data-template-name="my-status"
    data-attrs="name, money, showAddMoney">

    <span data-text="name">NO NAME</span>
    <span data-text="money">0</span>
    <button data-click-with-trigger="update">update</button>
    <button data-click="toggleShowAddMoney">toggle show add money</button>
    <button data-visible="showAddMoney" data-click="addMoney">addMoney</button>
  </div>
"""

# ビュー
class Status extends Horn.View
  templateName: 'my-status'
  addMoney: ->
    @money += 10 # data-attrs generate getters.
    # data-text='money' change view soon.

  toggleShowAddMoney: ->
    @showAddMoney = !@showAddMoney

# リストビュー
class StatusList extends Horn.ListView
  itemView: Status

$ ->
  # View
  status = new Status
  status.name = 'foo'
  status.money = 0

  # attach
  status.attach 'body'
  status.on 'update', -> console.log 'updated' # fired by custom directive

  # ListView
  list = new StatusList
  list.size(2) # generate automatically 2 blank view.
  list.update [{name: 1},{name: 2},{name: 3}] # generate automatically 3 view and apply params.
  list.addItem {name: 4} # add more
  list.attach 'body'

Horn.jsではビューの定義と、そこで起こったイベントの監視ができます。モデルはないのでモデルの変更に伴う通知はなく、さらにAjaxを使ったfetchのような機能はありません。もちろんその部分は自分で実装しても良いでしょう。

個人的にはルーティングがないのがちょっと残念な気もしますが、そこは別なライブラリを使っても良いと思います。ビューとイベントの取り回しだけシンプルにできれば良いといったケースは多いので、そういった時に活躍しそうです。

Horn.jsはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 mizchi/horn.js