JsViews: is there any way to get two-way data linking to work with contentEditable=true set on a <div> element?

Question

I can get two-way binding to work if I replace the div with contentEditable="true" with a textarea, but I don't like the way the text area behaves on the page. Is there anything that can be added to the template to get this to work, or a custom tag that would do it? The div here fills up and is editable, but it does not write back any changed contents.

If I replace it with an ugly textarea, it works fine.

I'm sure I could hack this with a hidden input and some jquery, but I'd rather not have to do that.

<script id="lcaSummaryBodyTemplate" type="text/x-jsrender">
    {^{for items}}
        <div class="bodyItem">
            <div class="colDec">
                <p>{{>title}}</p>
                {^{if type == "select"}}
                    <select data-link="val">
                        {^{for options}}
                            <option value="{{:value}}">{{:text}}</option>
                        {{/for}}
                    </select>
                {{else}}
                    {^{if type == "date"}}
                        <input data-link="val" class="date" />
                    {{else}}
                        <div data-link="val" contentEditable="true"></div>
                    {{/if}}
                {{/if}}
            </div>
            <div class="colHist">
                <p>{{>title}}</p>
                {{if type == "date"}}
                    <div class="date" data-link="histVal"></div>
                {{else}}
                    <div>{{>histVal}}</div>
                {{/if}}
            </div>
        </div>
    {{/for}}
</script>

Answer 1

It's not currently supported by JsViews - but is planned, and should be coming soon. I'll update this when it becomes available...