Form generator. How to do this?

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


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

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.

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

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

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

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

    &lt;component />
    &lt;component />

and let the derived classes do their magic?

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

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 'checkbox'}}
	< formitem-checkbox {(item)}="." {(user)}="user"></formitem-checkbox>

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}} 
		< /div>