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
570
Other Decks in Programming
See All in Programming
Google Opalで使える37のライブラリ
mickey_kubo
2
120
iOSでSVG画像を扱う
kishikawakatsumi
0
140
CSC509 Lecture 06
javiergs
PRO
0
260
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.4k
モテるデスク環境
mozumasu
3
130
contribution to astral-sh/uv
shunsock
0
270
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
470
CSC305 Lecture 09
javiergs
PRO
0
280
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
380
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
120
Claude Agent SDK を使ってみよう
hyshu
0
1.3k
Devoxx BE 2025 Loom lab
josepaumard
0
110
Featured
See All Featured
Navigating Team Friction
lara
190
15k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
990
Site-Speed That Sticks
csswizardry
13
910
Side Projects
sachag
455
43k
The Cult of Friendly URLs
andyhume
79
6.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Code Review Best Practice
trishagee
72
19k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Unsuck your backbone
ammeep
671
58k
Being A Developer After 40
akosma
91
590k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
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