There is a new Forms Guide available on canjs.com.
This is an extensive guide with lots of examples. Here are a few highlights:
All about bindings
The guide walks through how to use the many types of attribute and event bindings provided by CanJS. From simple bindings like on:click and value:from to more complex things like using on:input:value:to to update a variable each time the user types a key:
Custom events / attributes
On top of the events and attributes provided by the browser, CanJS also allows you to use custom events and attributes. The Forms Guide will show you how to use the Enter event to only update properties when the user types the Enter key:
You will also learn how to use custom attributes like the values attribute used below to bind to all of selected items in a <select multiple> element:
Template variables
Not all the properties you use in a form need to be a part of your view model. For properties that only affect your view, you can use template variables. The Forms Guide will show you how to use template variables for things like binding to when an element is focused so that styling can be applied:
All about converters
The can-stache-converters package makes it easy to convert the values provided by form element attributes into values that are convenient for the business logic of your view-model. The forms guide walks through how to use these converters for doing things like binding a set of checkboxes to individual items in a list:
In-depth examples
The forms guide also has a few in-depth examples that explain how to architect larger forms and how to handle complex relationships between your data and the elements in a form.
One of these is a new make-model-year demo that walks you through working with Promises, handling parent-child-relationships, and the new value behavior available in can-define@4.0:
Hopefully this has inspired you to take a look at the full Forms Guide.
There is a lot of information in this guide, so we’ll likely be tweaking how it is presented as we get more feedback. If there is anything that you find confusing or would like explained further, please let us know!
