knockout.js - A custom bindingHandler's return value/observable -

i have not been able find solution this.

i'm trying create custom bindinghandler click event on html element div tag.

// custom bindinghandler , observable <div data-bind="onclickevent: hasbeenclicked"></div> // show observable's true/false value <span data-bind="text: 'observable: ' + hasbeenclicked()"></span> 

this bindinghandler suppose to, if click on div text change. however, observable says if false.

ko.bindinghandlers.onclickevent = {     update: function (element, valueaccessor) {          $(element).text('click here: false');          var observable = ko.utils.unwrapobservable(valueaccessor());          $(element).on('click', function () {              observable = !observable;              if (observable) {                 $(element).text('click here: true');             } else {                 $(element).text('click here: false');             }         });     } }   function viewmodel() {     var self = this;     self.hasbeenclicked = ko.observable(false); }  ko.applybindings(new viewmodel()); 

how set observable hasbeenclicked switch between true/false on every click, text?

i second @nemesv's comment on quick fix fact binding looks bit strange. i'll expand answer because need room.

first up, quick fix:

• i think type of binding you're writing it's more appropriate work inside init part;
• you need write valueaccessor change observable's value (i show quick , dirty demo below);

here's working example:

ko.bindinghandlers.onclickevent = {      init: function (element, valueaccessor) {            $(element).text('click here: false');            var observable = ko.utils.unwrapobservable(valueaccessor());                    $(element).on('click', function () {              observable = !observable;                            valueaccessor()(observable);                if (observable) {                  $(element).text('click here: true');              } else {                  $(element).text('click here: false');              }          });      }  }    function viewmodel() {      var self = this;      self.hasbeenclicked = ko.observable(false);  }    ko.applybindings(new viewmodel());

div { padding: 10px; background-color: pink; margin-bottom: 10px; cursor: pointer; }

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>    <div data-bind="onclickevent: hasbeenclicked"></div>  <span data-bind="text: 'observable: ' + hasbeenclicked()"></span>

however, think kind of mix of jquery, event handling, , knockout rather iffy. should consider whether you're suffering xy-problem, , whether can't solve requirement using existing binding handlers. here's 1 way similar:

function viewmodel() {      var self = this;      self.hasbeenclicked = ko.observable(false);      self.handleclick = function() {        self.hasbeenclicked(!self.hasbeenclicked());      };  }    ko.applybindings(new viewmodel());

div { padding: 10px; background-color: pink; margin-bottom: 10px; cursor: pointer; }

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>    <div data-bind="click: handleclick, text: 'click here: ' + hasbeenclicked()"></div>  <span data-bind="text: 'observable: ' + hasbeenclicked()"></span>

speaking of existing binding handlers, know there's the click binding may suit needs. if doesn't, i'd recommend looking @ relevant source (click redirects event binding, see this file in github), draw inspiration own handler.