This is a quick little thing I came up with late at night just to pass time. The idea is to synchronize a DOM form and a can.DefineMap
Criteria:
#1. Link all wanted form input fields to the components viewModel so that it is updated on change.
#2. Do it in one simple function.
#3. Minimal DOM
#4. Make it easy to do 10 input fields or 1,000
For number #4 the best thing to do is modify this to use the events{} and store the “key path” in the elements attribute, same for the type.
I will be updating this here and there. All suggestions welcome!
@Nothing_New Thanks for posting! It’s always good to see how people solve problems in their apps.
The goal of can-stache-converters is to make binding to form elements easier. This makes it so that when you’re writing tests, you can just test the logic of your DefineMap without having to pass a mock %element to your functions.
For example, for your checkboxes you should be able to use:
<input type="checkbox" {($checked)}="formData.options.show_alerts"
Also, for your select element, you should just be able to use
{($value)}="formData.options.shoes"
Check out the converters docs for more complex examples.
If there is something that can’t be done with one of the provided converters, definitely open an issue and we can try to make it easier.
1 Like
Thanks!
I knew there would be something in canjs to do this built in. can-stache-converters is a very obscure name.