Backbone.jsAdventCalendar2012-14.md

#Backbone.jsでUIバインディング

Backbone.js Advent Calendarの14日目です。

Backbone.jsはAngularJSのようなUIバインディングを持たないので自分でバインドしなければなりません。 例えば、テキストボックスの入力内容をモデルに格納して、さらにモデルの内容を別のDOM要素に表示する、 というのはこんな感じかと思います。

<input type="text" name="hoge"/>
<div name="hoge"></div>

var textbox = new Backbone.Model({val: ""});

var View = Backbone.View.extend({
    el: "body",
    model: textbox,
    events: {
        "change [name=hoge]": "onChange"
    },
    initialize: function () {
        this.model.on("change", this.render, this);
    },
    onChange: function (e) {
        var attr = {};
        attr[e.target.name] = e.target.value;
        this.model.set(attr);
    },
    render: function () {
        $("[name=hoge]", this.$el).html(this.model.get("hoge"));
    }
});

new View();

この手間を軽減するいくつかのプラグインの中から、 今回はBackbone.ModelBinder を試してみました。

こんな感じに書けます。

var View = Backbone.View.extend({
    el: "body",
    model: textbox,
    initialize: function () {
        this.modelBinder = new Backbone.ModelBinder();
        this.modelBinder.bind(this.model, this.el);
    }
});

デフォルトではDOMのchangeとblurのイベントを拾うようですが、 例えば１文字入力するたびにリアルタイムで…みたいにするためにkeyupを拾うにはこんな感じです。

var View = Backbone.View.extend({
    el: "body",
    model: textbox,
    initialize: function () {
        this.modelBinder = new Backbone.ModelBinder();
        this.modelBinder.bindCustomTriggers(this.model, this.el, {"[name=hoge]": "keyup"});
    }
});

すごく短いエントリーでスミマセン。