gpt4 book ai didi

javascript - 如何使用 x-editable 就地编辑 bool 值

转载 作者:行者123 更新时间:2023-11-29 21:59:50 26 4
gpt4 key购买 nike

我想在页面上显示一个 bool 值(实际上它是表格中的单元格),并且它必须是可编辑的。此外,它不是一个复选框,但我拼出了“false”和“true”。我们使用 bootstrap 3 和最新的 knockout 。我决定使用 x-editable Bootstrap 3 构建。我还使用了 knockout 自定义绑定(bind):https://github.com/brianchance/knockout-x-editable .

我认为要实现这一点,我需要将 x-editable 配置为弹出模式,然后选择类型。我还在参数中提供了选择(仅在这种情况下为“true”和“false”)。几乎所有的东西都很好,但就地对话框在弹出时不显示当前值。我该如何解决?我尝试了“defaultValue”参数,但没有帮助。

这是 fiddle : 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);
}

最佳答案

问题是您的可观察对象中有 truefalse bool 值,但 x-editable 使用 01 表示“真”和“假”选择的值。

这会导致两个问题:

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

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

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

并且您需要在您的 editable 绑定(bind)中使用此属性:

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

关于javascript - 如何使用 x-editable 就地编辑 bool 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24439205/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com