How To Remove and Restore Template Event Binding

[Kelly]

Hi:

I'm using the event binding to bind a viewmodel function to a div in a template, like this:

<ul id="myList"  data-role="listview" data-template="myTemplate" data-bind="source: detail.states"></ul>

 <script type="text/x-kendo-template" id="myTemplate">
        <div data-role="touch" data-bind="events: { tap: open}">
            <div class="response-container">
                <div id="text">
                    ${text}
                 </div>
                <div id="controls" class="hidden" style="height: 100px">
                                <textarea id="response-textarea" maxlength="8000"></textarea>
.
.
.

The "open" function that fires for the tap event changes the class of the inner "controls" div to "unhidden", which just makes a textarea and some other bound buttons visible.  In that function, I want to remove the event binding established in the data-bind of the template.  In other words, I want to be able to interact with the newly exposed widgets without firing the tap event over and over. One of the exposed buttons sets the class back to hidden, and then I would like to re-enable the tap event binding.  This would be trivial, if there wasn't a template involved, but I don't understand how the templating code adds the binding, so removing it is even more obscure.

So the general question is, how do you remove and restore an event binding for a listview item that is added via a template?

Thank you,

Kelly

[Alexander Valchev]

Hi Kelly,

The touch component is a widget. In order to unbind its event handlers you can use the unbind method.
The handler can be bound again at later time via bind method.

Regards,
Alexander Valchev
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.