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
-

執筆者:

関連記事

MIddlemanでrails-assets.orgをつかってbowerのコンポーネントをつかう

By: Simon Cunningham – CC BY 2.0 middlemanは静的なサイトのジェネレータ rails-assets.orgは「the frictionless pr …

no image

Rails3.2でJasmineをつかってBackbone.jsのCollectionをテストしてみる

  前回 Rails3.2でJasmineをつかってBackbone.jsのModelをテストしてみる   Developing Backbone.js Applications …

Yeomanで最新のJavaScript開発環境を最速で整える

環境 mac OSX Lion Yeomanは最新のJavaScript開発のための統合環境を提供してくれます yeoman.io/index.html 紹介動画 目次1 インストール2 さっそくアプ …

RailsでこんにちはBackbone.Marionette

By: palindrome6996 – CC BY 2.0 自分の中でmarionette熱がだんだんと高まりつつあり、特徴的なItemView、CollectionView、Compo …

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

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