ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Backboneでシステムに組み込む際にはビューにイベントのトリガーとなるアクションを仕込みます。そのためビューの中には色々なコードが書かれることになり、結果として殆どの処理をビューが行う状態になってしまったりします。

それを上手に切り離せるかもしれない機能がBackbone UIです。BackboneでUIコンポーネントを提供するという面白いソフトウェアです。

Backbone UIの使い方

幾つかのコンポーネントをチェックしてみます。

ボタンとカレンダー。
ボタンとカレンダー。

チェックボックスに日付ピッカー、それにリンクも。
チェックボックスに日付ピッカー、それにリンクも。

各種フォームのコンポーネントも入っています。
各種フォームのコンポーネントも入っています。

メニュー、プルダウンもあります。
メニュー、プルダウンもあります。

ラジオグループ。
ラジオグループ。

リストビュー。
リストビュー。

テーブルビュー。
テーブルビュー。

タブ。
タブ。

例えばテキストフィールドを使う場合、次のようになります。

// create a text field to add new items 
var newItem = new Backbone.Model;
var field = new Backbone.UI.TextField({
  model: newItem,
  content: 'title',
  placeholder: 'add a new item',
  onKeyPress: function(e) {
    if (e.keyCode == 13) {
      list.options.model.add(newItem.clone());
      newItem.set({
        title: undefined
      });
    }
  }
}).render();

テキストフィールドの中で、onKeyPressを定義すれば、実際に入力された際にこのイベントが呼ばれるようになります。ビューの中でkeypressなどを定義する必要はありません。イベントとビューが切り離されるとコードの見通しが良くなるのではないでしょうか。特にイベントのハンドリングが多い、Webアプリケーション開発に良さそうです。

Backbone UIはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

Backbone UI

perka/backbone-ui

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2