Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
can-form
Mihael Konjević
July 11, 2014
Programming
1
470
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
140
File uploading with can.Component and jQuery-file-upload
retro
0
570
JSON Schema and APItizer
retro
2
210
Event Oriented Architecture and Client side apps
retro
2
360
Other Decks in Programming
See All in Programming
Gitlab CIでMRを自動生成する
forcia_dev_pr
0
110
【Scrum Fest Osaka 2022】スクラムチームに放り込まれた若手エンジニアの皆さん、どのように技術のキャッチアップをしていくかイメージはついていますか?
miiiki
0
110
こそこそアジャイル導入しようぜ!
ichimichi
0
1.1k
Android Tools & Performance
takahirom
1
440
heyにおけるCI/CDの現状と課題
fufuhu
2
550
設計ナイト2022 トランザクションスクリプト
shinpeim
11
2k
Vite でお手軽 Vue.js の環境構築
azuki
2
180
即、New Relic / New Relic NOW!
uzulla
0
310
Mobile Product Engineering
championswimmer
0
300
チームでカレーを作ろう!アジャイルカレークッキング
akitotsukahara
0
780
How we run a Realtime Puzzle Fighting Game on AWS Serverless
falken
0
250
Swift Regex
usamik26
0
140
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
35
3k
Ruby is Unlike a Banana
tanoku
91
9.2k
Building an army of robots
kneath
299
40k
The Power of CSS Pseudo Elements
geoffreycrofte
46
3.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
23
15k
Docker and Python
trallard
27
1.6k
Making Projects Easy
brettharned
98
4.3k
Faster Mobile Websites
deanohume
294
28k
Building Applications with DynamoDB
mza
83
4.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
29
4.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
39
13k
Web Components: a chance to create the future
zenorocha
303
40k
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