Javascript 如何使用x-editable在位编辑布尔值
我想在页面上显示一个布尔值(实际上是表格中的单元格),并且它必须是可编辑的。此外,它不是一个复选框,但我拼写出“false”和“true”。我们使用Bootstrap3和最新的淘汰赛。我决定使用x-editable Bootstrap 3构建。我还使用了一个敲除自定义绑定: 我认为要实现这一点,我需要将x-editable配置为弹出模式,然后选择type。我还提供参数中的选择(“仅在本例中为true”和“false”)。几乎所有的事情都很好,只是“就地”对话框在弹出时不显示当前值。我怎样才能解决这个问题?我尝试了'defaultValue'参数,但没有帮助 这是小提琴:Javascript 如何使用x-editable在位编辑布尔值,javascript,knockout.js,twitter-bootstrap-3,x-editable,Javascript,Knockout.js,Twitter Bootstrap 3,X Editable,我想在页面上显示一个布尔值(实际上是表格中的单元格),并且它必须是可编辑的。此外,它不是一个复选框,但我拼写出“false”和“true”。我们使用Bootstrap3和最新的淘汰赛。我决定使用x-editable Bootstrap 3构建。我还使用了一个敲除自定义绑定: 我认为要实现这一点,我需要将x-editable配置为弹出模式,然后选择type。我还提供参数中的选择(“仅在本例中为true”和“false”)。几乎所有的事情都很好,只是“就地”对话框在弹出时不显示当前值。我怎样才能解决
问题是,在可观察的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: "false" },
{ value: 1, text: "true" }]' }">
</span>
演示
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: "false" },
{ value: 1, text: "true" }]' }">
</span>