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
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.7k
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
170
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
510
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
1
360
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
350
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
500
Leading Effective Engineering Teams in the AI Era
addyosmani
6
430
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
340
ALL CODE BASE ARE BELONG TO STUDY
uzulla
24
5.9k
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
240
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
130
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
940
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
185
22k
Site-Speed That Sticks
csswizardry
12
900
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Being A Developer After 40
akosma
91
590k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Agile that works and the tools we love
rasmusluckow
331
21k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Making Projects Easy
brettharned
120
6.4k
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