Created
May 2, 2017 21:04
-
-
Save imjoshdean/8f8b3c30d1f5fdcfbc0d93a40f585893 to your computer and use it in GitHub Desktop.
Proof of concept of #76: Adds true extensibility to can-components
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Component from 'can-component'; | |
| import DefineMap from 'can-define/map/'; | |
| import './form.less'; | |
| import view from './form.stache'; | |
| export const FormViewModel = DefineMap.extend({ | |
| lastModified: { | |
| type: 'date', | |
| value: new Date() | |
| }, | |
| submit() { | |
| console.error('base-form submitted'); | |
| } | |
| }); | |
| export const FormComponent = Component.extend({ | |
| tag: 'base-form', | |
| FormViewModel, | |
| view, | |
| events: { | |
| 'input change'() { | |
| this.viewModel.lastModified = new Date(); | |
| }, | |
| '{element} inserted'() { | |
| console.error('inserted'); | |
| } | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <form ($submit)="submit"> | |
| <button type="submit">Save</button> | |
| <button type="button">Reset</button> | |
| <div class="form-content"> | |
| <content /> | |
| </div> | |
| <div hidden> | |
| <input type="submit"/> | |
| </div> | |
| </form> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { FormComponent, FormViewModel } from 'example/components/form/' | |
| import './sample.less'; | |
| import view from './sample.stache'; | |
| export const ViewModel = FormViewModel.extend({ | |
| message: { | |
| type: 'string', | |
| value: 'foo' | |
| }, | |
| email: 'string', | |
| submit(vm, el, ev) { | |
| ev.preventDefault(); | |
| console.error('sample-form submitted'); | |
| } | |
| }); | |
| export default FormComponent.extend({ | |
| tag: 'sample-form', | |
| ViewModel, | |
| view, | |
| events: { | |
| '{element} inserted'() { | |
| console.error('inserted'); | |
| } | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <super> | |
| <p> | |
| <small>Last Modified: {{lastModified}}</small> | |
| </p> | |
| <p>{{message}}</p> | |
| <input type="email"> | |
| <input type="text" {($value)}="message"> | |
| </super> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is Deprecated by the canjs routing guide https://canjs.com/doc/guides/routing.html#Progressivelyloadthesub_components