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
Introduce Hono CLI
yusukebe
6
3k
SODA - FACT BOOK(JP)
sodainc
1
8.6k
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
190
技術的負債の正体を知って向き合う
irof
0
230
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
880
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
1
110
CSC509 Lecture 05
javiergs
PRO
0
310
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.4k
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
12
7.1k
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
340
コード生成なしでモック処理を実現!ovechkin-dm/mockioで学ぶメタプログラミング
qualiarts
0
250
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
350
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
BBQ
matthewcrist
89
9.8k
KATA
mclloyd
PRO
32
15k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Become a Pro
speakerdeck
PRO
29
5.6k
Site-Speed That Sticks
csswizardry
13
920
Automating Front-end Workflow
addyosmani
1371
200k
How GitHub (no longer) Works
holman
315
140k
Statistics for Hackers
jakevdp
799
220k
It's Worth the Effort
3n
187
28k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Building Adaptive Systems
keathley
44
2.8k
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