Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
can-form
Search
Mihael Konjević
July 11, 2014
Programming
1
550
can-form
Presentation of the can-form plugin -
https://github.com/retro/can-form
Mihael Konjević
July 11, 2014
Tweet
Share
More Decks by Mihael Konjević
See All by Mihael Konjević
Developing (with) Keechma
retro
1
240
File uploading with can.Component and jQuery-file-upload
retro
0
640
JSON Schema and APItizer
retro
2
260
Event Oriented Architecture and Client side apps
retro
2
560
Other Decks in Programming
See All in Programming
Claude Agent SDK を使ってみよう
hyshu
0
620
XP, Testing and ninja testing ZOZ5
m_seki
3
670
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
230
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
200
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
250
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
500
CSC509 Lecture 05
javiergs
PRO
0
300
CSC305 Lecture 08
javiergs
PRO
0
200
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
1.3k
オープンソースソフトウェアへの解像度🔬
utam0k
15
2.9k
Go言語はstack overflowの夢を見るか?
logica0419
0
340
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
830
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Faster Mobile Websites
deanohume
310
31k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
A designer walks into a library…
pauljervisheath
209
24k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
GitHub's CSS Performance
jonrohan
1032
470k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Transcript
can-form Awesome forms for CanJS
Why? • validations and error reporting is a pain •
similar code written over and over again • how do you handle nested object structures?
can-form • can-value is great, use it • behaves like
the can.Component • composable / nestable (allows it to handle nested structures) • validations on the form (validations are bound to context) • simple error reporting and tracking
API FormComponent.extend({ tag : 'simple-form', template : '<content><content>', validate :
{ username : [FormComponent.validationRules.presenceOf()], password : [FormComponent.validationRules.presenceOf()] } }); <simple-form map="{userModel}"> <input type="text" can-value="username"> {{#errors 'username'}} <ul class="bg-danger list-unstyled"> {{#this}} <li>{{ . }}</li> {{/this}} </ul> {{/errors}} <input type="text" can-value="password"> {{#errors 'password'}} <ul class="bg-danger list-unstyled"> {{#this}} <li>{{ . }}</li> {{/this}} </ul> {{/errors}} <button>Submit</button> </simple-form>
API FormComponent.extend({ tag : 'simple-form', template : '<content><content>', validate :
{ username : [FormComponent.validationRules.presenceOf()], password : [FormComponent.validationRules.presenceOf()], 'socialNetworks.*.username' : [FormComponent.validationRules.presenceOf()], 'socialNetworks.*.network' : [FormComponent.validationRules.presenceOf()] } });
API <simple-form map="{userModel}"> <input type="text" can-value="username"> {{#errors 'username'}} <ul class="bg-danger
list-unstyled"> {{#this}} <li>{{ . }}</li> {{/this}} </ul> {{/errors}} … ! {{#each socialNetworks}} <form-for map="{this}" path="socialNetworks.{{@index}}"> <input type="text" can-value="network"> // error reporting code here <input type="text" can-value="username"> // error reporting code here </form-for> {{/each}} <button>Submit</button> </simple-form>
API FormComponent.extend({ tag : 'social-network', template : socialNetworkTemplate, validate :
{ username : [FormComponent.validationRules.presenceOf()], network : [FormComponent.validationRules.presenceOf()] } })
API <simple-form map="{userModel}"> <input type="text" can-value="username"> {{#errors 'username'}} <ul class="bg-danger
list-unstyled"> {{#this}} <li>{{ . }}</li> {{/this}} </ul> {{/errors}} ! … ! {{#each socialNetworks}} <social-network map="{this}" path="socialNetworks.{{@index}}"> </social-network> {{/each}} ! <button>Submit</button> </simple-form>
github.com/retro/can-form @mihaelkonjevic