m.withAttr

この関数はイベントハンドラを生成するファクトリ関数です。この関数は、DOMエレメントのイベントリスナとして使えるメソッドを返します。

一般的に、この関数はm.propと組み合わせて、ビューからモデル方向のデータバインディングを作成するのに使います。

このメソッドは、ブラウザのイベントモデルと、コントローラ/ロジックモデルを疎結合にします。

Mithrilを使う場合には、このメソッドを使うか似たような機能を実装して、ブラウザのイベントオブジェクトからプログラムに使う値を取り出す操作を、コントローラやモデルにハードコードしないコーディングをしてください。


使用方法

//単独での使用
document.body.onclick = m.withAttr("title", function(value) {
    //bodyエレメントのタイトルがクリックされたらアラートを出す
    alert(value);
})

双方向データバインディングのサンプル

var user = {
    model: function(name) {
        this.name = m.prop(name);
    },
    controller: function() {
        return {user: new user.model("John Doe")};
    },
    view: function(controller) {
        m.render("body", [
            m("input", {onchange: m.withAttr("value", controller.user.name), value: controller.user.name()})
        ]);
    }
};

シグニチャ

シグニチャの読み方

EventHandler withAttr(String property, void callback(any value) [, any callbackThis])

where:
    EventHandler :: void handler(Event e)
  • String property

    この関数のコールバックに渡したい値を持つ、DOMエレメントのプロパティを設定します。

  • void callback(any value)

    この関数は引数として定義されたプロパティの値とともに呼ばれます。

    • any value

      これは定義されたDOMエレメントの値です。

  • any callbackThis

    コールバック内でthisキーワードが指すオブジェクトを指定します。

  • returns EventHandler handler

    このハンドラメソッドは、onclickなどのプロパティに設定したり、addEventListenerにコールバックとして渡すことができるメソッドです。