Question

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

我认为要实现这一点，我需要将x-editable配置为处于弹出模式，然后选择type。我还在参数中提供选择（＆＃34; true＆＃34;和＆＃34; false＆＃34;仅在这种情况下）。除了当弹出窗口中的就地对话框没有显示当前值时，几乎所有东西都很精致和花花公子。我该如何解决这个问题？我试过了默认值＆＃39;参数，但它没有帮助。

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

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

这会导致两个问题：

初始化时，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。

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

1 个答案: