Backbone.js

Backbone-formsをさわってみた

投稿日:

github.com/powmedia/backbone-forms

backbone-formsの特徴

  • 簡単なスキーマでフォームを生成
  • バリデーション
  • ネストしたフォーム
  • 使えるそしてカスタマイズ可能なエディタ
  • テンプレート

準備

backbone-forms.jsとold.jsとold.css(bootstrapを使っている場合はbootstrap3.js.とbootstrap3.css)を読み込んでおく

また、list.jsとbootstrap-modal.jsも読み込んでおくとよい

Railsの場合はvendor/assetsにでもいれておいて、applicaiton.jsとapplication.cssで読み込む

使い方

モデル

schemaをつくる typeの指定でフォームのタイプが決まる

 ビュー

適当もちろんFormはextendsで別クラスを作っておいてもいい

Backbone.Formにschemaを決めたModelを渡せば自動でフォームができる

スキーマを変えればフォームも変わる

例えばテキストエリア追加

screenshot

リストを使ってみる

screenshot

list.jsを使って、項目を自由に追加したり、削除したりも可能

NestedModelがうまく動かないのでここまで

Error: Missing required “schema.model” option for NestedModel editor

-Backbone.js
-

執筆者:

関連記事

Rails3.2とBackbone.jsでサーバーサイドのページネーション

By: Haldane Martin – CC BY 2.0   前提 Rails3.2とBackbone.jsでサーバーサイドのフィルタリング Rails3.2とBackbon …

Rails3.2とBackbone.jsでGoogle CalendarライクなカレンダーにCRUD~fullcalendar-rails

目次1 前回2 READ ~データベースからイベントを読み込んでカレンダーに表示する3 CREATE~カレンダーからイベントを登録する4 UPDATE1~カレンダーのイベントをクリックしてイベントを編 …

Backbone.Eventを使ったグローバル通知

  By: Carissa Rogers – CC BY 2.0 Backbone.js global notifications berzniz.com/post/193515

no image

Rails3.2でBackbone.jsとPrivate_pubでToDoアプリをリアルタイム化(できた!)

参考 Rails3.2でリアルタイムメッセージング~Private_pub、Faye Rails3.2とBackbone.jsでToDoアプリを作ってみた~backbone-on-rails &nbs …

Backbone.jsからjQuery UIのDialogを使う例

Backbone.js楽しくなってきた 部品ごとのクラスをつくって、それに飾りとイベントをつけて、あとは上位部品から呼び出してくっつけるだけ jQuery UIのダイアログの場合は、公式のサンプルだと …