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
-

執筆者:

関連記事

三目並べゲームのAI〜原始モンテカルロ法

By: Luca Galli – CC BY 2.0 目次1 ゲーム用のAI2 シャローコピー3 AI4 勝率 ゲーム用のAI 三目並べのAIを考えてみた. 有効手をリストアップして、おの …

気になるBackbone.jsのプラグインとTips

  By: Francisco Gonzalez 随時更新中 目次1 気になるBackbone.jsのプラグイン2 チュートリアル3 Tips4 気になるjQueryのプラグイン 気になるB …

Backbone.Marionette+NedbでElectron♪

By: Jairo – CC BY 2.0 目次1 はじめに2 環境3 yarnのインストール4 electronのインストール5 開発環境の概要6 webpackでライブラリの同梱7 g …

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

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

もしもRails3.2とBackbone.jsでリアルタイムな2ch風な掲示板をつくったら〜private_pub

By: Kevin Dooley – CC BY 2.0   まだ、Observerのことがよくわかってない ので、過去のやつをもとにやってみた dry-shore-2517.h …