Form generator. How to do this?

CanJS
1

I can’t figure this out. I want to create some kind of form generator. I’ve got these class definitions: (abbreviated)

class Config {
    constructor( appName, components ) {
         this.components = components;
    }
    form( root ) {
         $(root).append( configStache ); // set through require
    }
}

config.stache:

<form>
    <ul>
    {{#components}}
        <li {{data 'component'}}>{{>template}}</li>
    {{/components}}
        <li><input type="submit" value="Save"/></li>
    </ul>
</form>

The Config has a list of Components, each of which is a derived class of Component, e.g. Component.Input or Component.Dropdown of Component.File, etc… Each have their own stache template and I want them to have their own Controller.

In config.stache the templates are rendered fine, but I don’t know how to install the class-specific controllers.

Should I just render the form and after this is done install the Controls? Something like:

    form(root) {
         $(root).append( configStache ); // set through require
         $('.component', root).each( function( elem ) {
              var component = $(elem).data('component')
              component.createControl( elem );
         });
    }

I looks like the old instance() is gone though? At least I cannot find how to use it anymore.

2

Yes, you could do that. I would make each one of the input components it’s own can.Component rather than a can.Control.

3

If I’d use Components I would have to specify the components in main template like so:

 &lt;form>
     &lt;component-text />
     &lt;component-dropdown />
 &lt;/form>

But I don’t know which subcomponents will be inserted, that’s dependent on the configuration. Or could I call

&lt;form>
    &lt;component />
    &lt;component />
   ...
&lt;/form>

and let the derived classes do their magic?

(BTW: it’s pretty hard/impossible to enter HTML into this form :-()

4

We did something like this for our dynamic form.
Each input type is a seperate component and all it’s properties come from the back-end

Form component stache looks like this:

{{#switch type}}
{{#case 'text'}}
 	< formitem-text {(item)}="." {(user)}="user"></formitem-text>
{{/case}}
{{#case 'checkbox'}}
	< formitem-checkbox {(item)}="." {(user)}="user"></formitem-checkbox>
{{/case}}
...

And component formitem-text looks like this:

{{#if user}}
	{{#with item}}
		< div class="form-item">
			<label for="{{formitemId}}">{{label}}:</label>
			<input id="{{formitemId}}" type="text" 
				class="userfield {{#if hasError}}error{{/if}}"
				{{#if required}}required{{/if}} 
				{{#if disabled}}disabled="true"{{/if}} 
				{{#if focus}}autofocus{{/if}} 
				{{#if maxlength}}maxlength="{{maxlength}}"{{/if}} 
				data-userfield="{{field}}"
				{($value)}="itemValue"
				($input)="update(@element.val)"
			/>
		< /div>
	{{/with}}
{{/if}}