Skip to content

Instantly share code, notes, and snippets.

@ando19721226
Created December 14, 2012 10:34
Show Gist options
  • Save ando19721226/4284404 to your computer and use it in GitHub Desktop.
Save ando19721226/4284404 to your computer and use it in GitHub Desktop.

#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のイベントを拾うようですが、 例えば1文字入力するたびにリアルタイムで…みたいにするために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"});
    }
});

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment