jquery mobile - How to bind the element id to an observable using an extender in knockout? -

i have set of check boxes, each bound custom "checked" handler:

    <input type="checkbox" name="colours-red" data-bind="jqmcheckbox: colourred" id="check-1" />     <input type="checkbox" name="colours-green" data-bind="jqmcheckbox: colourgreen" id="check-2" />     <input type="checkbox" name="colours-blue" data-bind="jqmcheckbox: colourblue" id="check-3" /> 

my view model easy:

this.colourred = ko.observable(false); this.colourgreen = ko.observable(false); this.colourblue = ko.observable(false); 

now, try extend colours follows, automatically updated. need other subscribers notified, if changing:

ko.extenders.elementid = function (target, option) {     target.elid = ko.observable();      function setelementid(target, option) {         target.elid(option);     }     target.subscribe(setelementid);     return target; }; 

inside custom binding element id:

ko.bindinghandlers.jqmcheckbox = {     update: function (element, valueaccessor, allbindingsaccessor, viewmodel, bindingcontext) {         ko.bindinghandlers.checked.update(element, valueaccessor, allbindingsaccessor, viewmodel, bindingcontext);         // ...set valueaccessor extender ?     } }; 

but i'm not able work, , dont know if possible, anyway. how can set extender in custom binding handler, element available parameter?

this jsfiddle: http://jsfiddle.net/tk2fz/1/

thanks in advance

i wouldn't bother extender; set elid property inside binding handler.

ko.bindinghandlers.jqmcheckbox = {     init: function (element, valueaccessor, allbindingsaccessor, viewmodel, bindingcontext) {         if (!valueaccessor().elid) {             valueaccessor().elid = ko.observable();         }         valueaccessor().elid(element.id);         return ko.bindinghandlers.checked.init.apply(this, arguments);     },     update: function (element, valueaccessor, allbindingsaccessor, viewmodel, bindingcontext) {         return ko.bindinghandlers.checked.update.apply(this, arguments);     } }; 

the code inside of init because that's called when binding initialized on particular element.

edit

if need observable available immediately, can use extender (in addition code above). observable updated when binding initialized.

ko.extenders.elementid = function (target, option) {     target.elid = ko.observable();     return target; };