如何从更改的模板中删除 Knockoutjs 事件处理程序

Question

I'm looking the way of how to remove event handler from disappeared UI template.

For example I have an element with template binding.

Template name comes from observable property. When I set the valid name, template renders button with click binding / event. When I pass undefined as the name, template renders nothing.

What happens to event handler and binding?

UPD: Some code from my head:

<div data-bind="template: { name: templateName }"></div>

<script type="text/html" id="btn-tmpl">
    <button data-bind="click: $root.buttonClick">Click me</button>
</script>

<script>
    var vm = {
        templateName: ko.observable('btn-tmpl'),
        buttonClick: function(){ alert('clicked'); }
    };

    ko.applyBindings(vm);
</script>

Answer 1

There are 2 scenarios here

1. templateName value starts with undefined.
2. templateName value starts with "btn-tmpl" and is changed to undefined.

In the first case the template binding will not simply not render anything as there is no name. Therefore there is no button element in the DOM and no event

In the second case, when the templateName is cleared KO will empty the contents of the div with the template binding, this includes cleaning up all event handlers.

As a further note, a script element with type "text/html" is not actually passed by the browser as DOM nodes. You will not be able to locate that button element in the DOM and so KO will not have wired up an event handler