jsRender template inside tag

Question

I am trying to put a jsRender-template inside a tag.
I need this to be able to render similar onmouseover and onmouseout into any element.

Test code:

inside template

<small {{for "Key_" + Key tmpl="tooltip_logic"/}}>shows key on hover</small>

partial template

<script type="text/x-jsrender" id="tooltip-logic-template">
    onmouseover="$('#Key_{{:#data}}').show();" onmouseout="$('#Key_{{:#data}}').hide();"
</script>

javascript before rendering template

$.templates({ 
    ...
    tooltip_logic: $('#tooltip-logic-template').html() 
});

The output gets render inside the <small> tag though.

Is there any way to achieve this? And if not, what is the closest approach possible?

Answer 1

There are a couple of sample pages on jsviews.com that look at this scenario.

First, this "From rendering to linking" page shows how you can indeed use JsRender tags within the HTML markup of an element. It then goes from there towards how you can do the same thing in the context of JsViews and data-linking.

Later in the tutorial, on the page: "Using data-link and visibility, with mouse events (hover)", it explores alternative ways hook up the onmouseover behavior and showing/hiding a related HTML element.