javascript - With Knockout.JS how to attach an event handler using custom binding handler -

my binding handler adds hyperlink list item tag. know how attach click event hyperlink through binding handler. click event should call function within view model.

you can see code in this jsfiddle.

so question is: how attach event handler call showsectionname view model? maybe using ko.bindinghandlers.click(...)?

$(function () {      ko.bindinghandlers.bootstraphyperlink = {          init: function (element, valueaccessor, allbindings, viewmodel, bindingcontext) {              var elt = "<a href='#'>" + viewmodel.name + "</a>";              $(element).append(elt);          }      };        var section = function (id, name) {          var self = this;            self.id = id,          self.name = name      };        self.showsectionname = function (data) {          alert("you clicked section " + data.name);      }        function viewmodel() {          var self = this;          self.sections = ko.observablearray([              new section(1, "section 1"),              new section(2, "section 2"),              new section(3, "section 3")          ])      }      ko.applybindings(new viewmodel());  });

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>    <div style="width:200px">      <ul class="nav nav-pills nav-stacked" data-bind="foreach:sections">          <li role="presentation" data-bind="bootstraphyperlink: {click: showsectionname($data)}">          </li>      </ul>  </div>

see here ko.utils.registereventhandler

but looks might use ko.components.