javascript - 单击时更改样式的自定义绑定不起作用

Question

我在表格中显示数据，但某些字段太长并导致它们的行太高，因此我正在创建一个自定义绑定，它将切断溢出并用省略号显示有问题的字段。

a, b, c, d,...

然后，当用户单击该字段时，它将“取消隐藏”显示该字段所有数据的数据。

我的绑定虽然不能正常工作。我的目标是最初隐藏所有溢出并在用户单击该字段时取消隐藏每个字段。

我的绑定正在做相反的事情，有点。最初，它使字段不隐藏，然后在用户单击该字段后隐藏该字段。但是一旦发生初始点击，该字段将不会再次切换。

我觉得我有点想多了……

更新

一旦点击事件被触发，options.data 的值将始终保持它最初更改的值。如何将当前版本的 hideOverflow 作为 valueAccessor 发送到 click init 函数？

score 1 · Accepted Answer

您可能希望切换您的hideOverflow可观察对象，而不是将其设置为传递给点击绑定的值（数据本身，这是真实的）。

所以，你可以这样做：

self.changeOverflow = function () {
    self.hideOverflow(!self.hideOverflow());
};

score 1 · Accepted Answer

我已经用 RP Niemeyer 的解决方案更新了您的小提琴，以及针对您的特定情况的解决方案。

我在第 15 行添加了一个 bang

options.data = !ko.utils.unwrapObservable(options.data);

我认为更新绑定有点误导，因为它也是在初始化时触发的。

score 0 · Accepted Answer

问题的出现是因为newValueAccessor返回调用options.click而不是返回调用options.click. 我改了这个...

var newValueAccessor = function () {
    return options.click(!ko.utils.unwrapObservable(options.data));
};

对这个……

var newValueAccessor = function () {
    return function (data) {
        options.click.call(viewModel, !data.hideOverflow());
    };
};

它就像一个魅力

3 回答 3