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
520
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
210
File uploading with can.Component and jQuery-file-upload
retro
0
620
JSON Schema and APItizer
retro
2
240
Event Oriented Architecture and Client side apps
retro
2
520
Other Decks in Programming
See All in Programming
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4k
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.3k
チームリードになって変わったこと
isaka1022
0
200
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
130
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
530
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1k
Lottieアニメーションをカスタマイズしてみた
tahia910
0
130
Formの複雑さに立ち向かう
bmthd
1
860
SwiftUI Viewの責務分離
elmetal
PRO
1
240
Domain-Driven Transformation
hschwentner
2
1.9k
仕様変更に耐えるための"今の"DRY原則を考える / Rethinking the "Don't repeat yourself" for resilience to specification changes
mkmk884
4
650
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
120
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
298
20k
4 Signs Your Business is Dying
shpigford
182
22k
Statistics for Hackers
jakevdp
797
220k
Fireside Chat
paigeccino
34
3.2k
Gamification - CAS2011
davidbonilla
80
5.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
Practical Orchestrator
shlominoach
186
10k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Automating Front-end Workflow
addyosmani
1368
200k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
410
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