javascript - How to in-place edit boolean value with x-editable -

javascript - How to in-place edit boolean value with x-editable -

i want display boolean value on page (actually it'll cells in table), , has editable. furthermore, it's not checkbox, spell out "false" , "true". utilize bootstrap 3, , latest knockout. decided utilize x-editable bootstrap 3 build. utilize knockout custom binding: https://github.com/brianchance/knockout-x-editable.

i figured implement need configure x-editable in popup mode, , select type. supply selections ("true" , "false" in case) in parameter. fine , dandy, except in-place dialog doesn't display current value when pops up. how can prepare that? tried 'defaultvalue' parameter, didn't help.

here fiddle: http://jsfiddle.net/csabatoth/7ybvh/4/

<span data-bind="editable: value, editableoptions: { mode: 'popup', type: 'select', source: '[{ value: 0, text: &#34;false&#34; }, { value: 1, text: &#34;true&#34; }]' }"> </span>

simple model:

function viewmodel() { var self = this; self.value = ko.observable(false); }

the problem have true , false boolean values in observable x-editable uses 0 , 1 values represent "true" , "false" selection.

this causes 2 problems:

when initialized x-editable not know "false" means 0 no default value selected if select in pop-up editor value observable contain "0" , "1" strings , not false , true boolean values...

you can solve both problems intoroducing computed property translates between boolean , numerical values:

self.computed = ko.computed({ read: function() { homecoming self.value() ? 1 : 0 }, write: function(newvalue) { self.value(newvalue == '1') } });

and need utilize property in editable binding:

<span data-bind="editable: computed, editableoptions: { mode: 'popup', type: 'select', source: '[{ value: 0, text: &#34;false&#34; }, { value: 1, text: &#34;true&#34; }]' }"> </span>

demo jsfiddle.

javascript knockout.js twitter-bootstrap-3 x-editable