javascript - クリック時にスタイルを変更するカスタムバインディングが機能しない

Question

テーブルにデータを表示していますが、一部のフィールドが長すぎて行が高すぎるため、オーバーフローを遮断し、問題のあるフィールドを省略記号で表示するカスタムバインディングを作成しています。

a, b, c, d,...

次に、ユーザーがフィールドをクリックすると、そのフィールドのすべてのデータを示すデータが「再表示」されます。

ただし、バインディングが正しく機能していません。私の目標は、最初にすべてのオーバーフローを非表示にし、ユーザーがフィールドをクリックすると各フィールドを再表示することです。

私のバインディングは逆のことをしています。最初に、フィールドを再表示してレンダリングし、ユーザーがクリックするとフィールドを非表示にします。ただし、最初のクリックが発生すると、フィールドは再び切り替わりません。

ちょっと考え過ぎのような気もしますが…

アップデート

クリックイベントが発生すると、options.data の値は常に最初に変更された値のままになります。現在のバージョンの hideOverflow を valueAccessor として click init 関数に送信するにはどうすればよいですか?

score 1 · Accepted Answer

RP Niemeyer のソリューションと、特定のケースに対する私のソリューションでフィドルを更新しました。

15行目に強打を追加しました

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

update バインディングは、init でもトリガーされるという点で少し誤解を招くと思います。

score 1 · Accepted Answer

hideOverflowクリックバインディングに渡された値（データ自体、真実です）に設定するのではなく、オブザーバブルを切り替えたいと思うでしょう。

したがって、次のことができます。

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

score 0 · Accepted Answer

この問題は、を呼び出す無名関数を返すのではなく、newValueAccessorへの呼び出しを返すために発生しました。私はこれを変更しました...options.clickoptions.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