JsViews: in-line template syntax for direct linked form element

Question

I saw an example of linking directly to a form element using JsViews, which I found to be preferable to encapsulating the whole form in a template. Here is a jsfiddle example of what I'm trying to do, which partially works: http://jsfiddle.net/30jpdnkt/

var app = {
    selections: {
        things: [
            { Name: "thingName1", Value: "thingValue1" },
            { Name: "thingName2", Value: "thingValue2" },
            { Name: "thingName3", Value: "thingValue3" }
        ]
    },
    formData: {
        selectedThing: "thingValue1",
    }
};


//how do I reference this template in-line, outside of another wrapping template?
$.templates({
    theTmpl: "#theTmpl"
});

$("#content").link(true, app);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.jsviews.com/download/jsviews.js"></script>


<script id="theTmpl" type="text/x-jsrender">
    <select id="thingChoice" data-link="formData.selectedThing">
        <option value="-">Please select</option>
        {^{for selections.things}}
        <option data-link="value{:Value} {:Name} selected{:~selected === Value}"></option>
        {{/for}}
    </select>
</script>

<div id="content">
    <!--this part works-->
    <input data-link="formData.selectedThing trigger=true"/>
    <!--this part does not display-->
    <span {{for data tmpl="theTmpl"/}}></span>
</div>

The data-linked INPUT tag is correctly bound to the object, but I cannot find a working example of how to reference a compiled template in-line without encapsulating the entire form in another template. That it's possible to use data-link syntax outside of a template gives hope that it may be possible with correct syntax.

Is this possible?

Answer 1

Yes it is possible - it is what I call top-level data-linking. There will be new documentation topics on this coming very soon, but meantime you have this sample:

http://www.jsviews.com/#samples/editable/toplevel-for

And your jsfiddle - which I updated to make it work fully: http://jsfiddle.net/30jpdnkt/1/

<div id="content">
    <input data-link="formData.selectedThing trigger=true"/>
    <span data-link='{for tmpl="theTmpl"}'></span>
</div>