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
-

執筆者:

関連記事

Electron+Backbone.jsでボードゲーム〜3目並べ

By: sopasnor – CC BY 2.0 目次1 ボイラープレート2 構想3 盤面の描画4 Marionette.ObjectとBackbone.Radio5 AI6 Done!7 …

Backbone.jsからRails3.2へのPUTに対して204(no content)が返ってくる問題

By: Bernardo Chang – CC BY 2.0   UPDATEするときRailsはデフォルトでJSONには何も返さないのがデフォルトぽい [crayon-58fc …

ThoughtBotの『Backbone.js on Rails』の目次と見出しをななめ読み

By: John – CC BY 2.0 learn.thoughtbot.com/products/1-backbone-js-on-rails 買いました 電子書籍で137ページに$4 …

Rails4でMarkdownをリアルタイムプレビュー〜backbone-on-rails&marked.js

By: Kool Cats Photography over 2 Million Views – CC BY 2.0 目次1 前回2 サンプルアプリ3 Gemfile4 generate5 …

Hallo.jsのMarkdownをWYSIWYGで編集できるサンプルがぐう便利だったのでRails3.2とBackbone.jsでやってみた

hallojs.org/demo/markdown/ これ  とにかく一度さわってみて欲しいんですけど 目次1 サンプルの便利ポイント2 Rails3.2とBackboneで動かしてみる サンプルの便 …