Bind @var HTMLElement inside of a nested template?

I am trying to dynamically set @var HTMLElements based on a data array which will generate interactive sliders, checkboxes, radio buttons.  I can get it to work if I explictly define the @var in the HTML but only for one component outside of a template.  I need it to work dynamically based on my observable collection results. 

 

My current structure looks like:

 

export interface Layer {

 

    source: string;

 

    datavalues: string;

 

    summarization: string;

 

    min: string;

 

    max: string;

 

    increment: string;

 

    field: string;

 

    uitype: string;

 

    directionality: string;

 

    desc: string;

 

    notes: string;

 

    uiID: ObservableCollection<string>;

 

    uiELem: HTMLElement;

 

    uiValue: HTMLElement;    

 

}

 

My html is set to parse based on the ui type:

 

<ul data-binding="{@source: layers}">

 

                    <li data-binding="{@template-for: layers}">

 

                        <div class="data-label" data-binding="{@text:datalayer}"></div>

 

                        <div class="data-label" data-binding="{@source: @context}{@template-selector:uitype}">

 

                            <div data-binding="{@template-select:Checkbox

 

}{@template: geocortex/oe_amd/OE_SageGrouseConsPln/Templates/checkbox.html}"></div>

 

                        </div>

 

                    </li>

 

                </ul>

 

Which then calls the corresponding template which has this html:

 

 <div data-binding="{@source: uiID}">

 

        <div data-binding="{@template-for: uiID}{@text: @context}">       

 

        <input type="text" data-binding="{id: @context}{@var: @context}" readonly style="border:0;color:#f6931f;font-weight:bold">

 

        </div>

 

    </div>

 

When I load it though the @var is setting only one html element for @context, not the value of @context.  I can see that the unique name in uiID is being sent to the nested template by binding to the @text. 

 

Anybody know how to dynamically create html elements outside of using jquery directly?  I would like to leverage the data binding of the framework, but so far am stumped.