より簡単にカスタムディレクティブが定義できるようになった Horn.js v0.1 リリース

卒論の息抜きに色々いじった。

カスタムディレクティブの機能を追加

自分でも作ってても面倒くさかったので、こんな風に簡単にした。下は data-click のサンプル。

Horn.addDirectiveByEachElement "data-click", (view, $el, val) ->
  $el.on 'click', (view[val].bind view)

data-click付けたエレメントごとにコールバックでリスナーつけている。他にも Horn.addDirectiveByEachValue があるが使い方はソース参照としか言えない。まだドキュメント書く気分ではない。

data-view, data-list-view ディレクティブの追加でより宣言的に

というわけで自分が欲しかったdirectiveを追加する。テンプレートに外部ビューを植え付ける data-view, data-list-view のdirectiveを追加した。

サンプルはこれ https://github.com/mizchi/horn.js/blob/master/examples/layout-with-children/main.coffee

こんな風にテンプレートを書ける。

  <div
    data-template-name="layout"
    data-child-views="status, statusList"
    data-attrs="">
    <h1>layout</h1>
    <div data-view='attr:status, class:status'/>
    <div data-list-view='attr:statusList, class:status'/>
  </div>

こんな風にテンプレートと変数をマッピングして使える。

class Status extends Horn.View
  templateName: 'status'
class Layout extends Horn.View
  templateName: 'layout'
  viewClassMapping:
    status: -> Status

# 使う
layout = new Layout
layout.attach 'body'
layout.status.name = 'foo'
layout.status.money = 0
layout.statusList.update [{}, {}, {}]

layoutインスタンスに status: Horn.View, statusList: Horn.ListView のインスタンスが生えてて操作できる。

ちなみにdata-viewのdirectiveはこんな感じで定義してある。

Horn.addDirectiveByEachElement "data-view", (view, $el, val) ->
  data = parseObjectiveLiteral(val) # hoge:fuga, foo:bar => {hoge:'fuga', foo:'bar'}
  Cls = view.viewClassMapping[data.class]()
  cv = new Cls
  cv.attach $el
  view[data.attr] = cv

TODO

(まだ)テスト書く
(まだ)ドキュメント書く

ポール・グレアムも自作の言語/ライブラリを広める一番の方法は、たまたま優秀なライブラリがその言語で書かれる「トロイの木馬」方式だと言っていたし、なんか作りたい。