自定义绑定以在点击不工作时更改样式

Question

我在表格中显示数据，但是某些字段太长并且导致它们的行太高，所以我创建了一个自定义绑定，它将切断溢出并显示带有省略号的违规字段。 / p>

a, b, c, d,...

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

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

我的约束正好相反。最初它渲染字段 unhidden 然后在用户单击它时隐藏字段。但是一旦发生初始点击，该字段将不会再次切换。

My fiddle

我觉得我在想这个......

更新

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

Answer 1

你想要切换你的hideOverflow observable，而不是将它设置为传递给click绑定的值（数据本身，这是真的）。​​

所以，你可以这样做：

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

Answer 2

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

http://jsfiddle.net/dzul1983/fT4dH/5/

我在第15行添加了一声巨响

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

我认为更新绑定有点误导，因为它也是在init上触发的。

Answer 3

问题出现了，因为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());
    };
};

它就像一个魅力