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

【问题标题】：How to in-place edit boolean value with x-editable如何使用 x-editable 就地编辑布尔值
【发布时间】：2014-06-26 20:00:28
【问题描述】：

我想在页面上显示一个布尔值（实际上是表格中的单元格），并且它必须是可编辑的。此外，它不是一个复选框，但我拼出了“false”和“true”。我们使用 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);
}

【问题讨论】：

标签： javascript knockout.js twitter-bootstrap-3 x-editable

【解决方案1】：

问题是您的 observable 中有 true 和 false 布尔值，但 x-editable 使用 0 和 1 值来表示“真”和“假”选择。

这会导致两个问题：

初始化时 x-editable 不知道“false”表示 0 所以没有选择默认值
如果您在弹出式编辑器中选择任何内容，您的value observable 将包含“0”和“1”字符串，而不是false 和true 布尔值...

您可以通过引入在布尔值和数值之间转换的计算属性来解决这两个问题：

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.

【讨论】：