如何在适当的地方编辑布尔值与x可编辑

Question

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

我想，要实现这一点，我需要配置x-edable在弹出模式，并选择类型。我还在参数中提供选择（“真”和“假”仅在这种情况下）。几乎一切都很好，除了就地对话框弹出时不显示当前值。我该怎么解决这个问题？我尝试了默认值参数，但没有帮助。

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

问题是，在可观察的x-editable中有true和false布尔值，但x-editable使用0和1值来表示“true”和“false”选择。

这导致两个问题：

• 初始化时，x-editable不知道“false”表示0，因此未选择默认值
• 如果在弹出式编辑器中选择任何内容，则值可观察值将包含“0”和“1”字符串，而不是假和真布尔值

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

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

您需要在可编辑绑定中使用此属性：

<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.