如何使用x-editable就地编辑布尔值

Question

我想在页面上显示布尔值（实际上它将是表格中的单元格），并且它必须是可编辑的。此外，这不是一个复选框，但我拼出“假”和“真”。我们使用bootstrap 3和最新的淘汰赛。我决定使用x-editable Bootstrap 3 build。我也使用淘汰赛自定义绑定：https://github.com/brianchance/knockout-x-editable。

我觉得要实现这一点，我需要配置x-editable以弹出模式，并选择类型。我还在参数中提供选择（仅在这种情况下为“true”和“false”）。几乎所有的事情都很好并且很花哨，除了原地弹出的对话框在弹出时不显示当前值。我该如何解决这个问题？我尝试了'defaultValue'参数，但它没有帮助。

这里是小提琴： 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> 

简单的模型：

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

Answer 1

的问题是，你有true和false布尔值，您观察到的，但X-编辑使用0和1值来表示“真”和“假”选择。

这会导致两个问题：

• 当初始化x编辑不知道，“假”是指0，所以选择
• ，如果你选择在弹出的编辑器中的value观察到的东西没有默认值将包含“0”和“1”的字符串，而不是false和true布尔值...

可以解决这两个问题与intoroducing它转换betwee一个计算属性n个布尔和数值：

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

而且你需要在你的editable使用这个属性绑定：

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

演示JSFiddle。