如何使用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。