20

私は少しjavascriptを持っています：

function ViewModel() {
    var self = this;
    self.highlight = ko.observable(true);   
}

ko.applyBindings(new ViewModel());

そしてそれを補完するhtml：

<div data-bind="css: { highlighted: highlight }, click: highlight( !highlight() )">
    random string
</div>

私が達成しようとしていること：

  1. cssクラス'highlighted'は、varhighlightがtrueの場合にのみアクティブ化されます
  2. divをクリックすると、varhighlightのbool値が切り替わります。
  3. 希望する結果：divをクリックしてcssクラスをアクティブ化/非アクティブ化します

私が得ているもの：

  1. ハイライトの初期値はですが、cssクラスは非アクティブ化さtrueれ始めます（初期値をに変更するfalseと、cssクラスがアクティブ化されます。これは、まだ何もクリックしていないときに、何らかの方法でクリックバインドをトリガーしたようです）。
  2. divのcssクラスはクリックしても切り替わりません

ViewModel内に対応する新しいクリック関数を作成したくありません。可能であれば、データバインド内にインラインでのみ配置できるコードを探しています。

JSFiddleのコードは次のとおりです：http：//jsfiddle.net/4wt4x/1/

誰かが何が起こっているのか、私が間違っていることを説明できますか？

4

4 に答える 4

43

私はそれが古い質問であることを知っていますが、多分誰かを助けることができます。多くの場所でトグルを使用する必要がある場合は、カスタムバインディングシュガーが役立つ可能性があります。

バインディング：

ko.bindingHandlers.toggleClick = {
    init: function (element, valueAccessor) {
        var value = valueAccessor();

        ko.utils.registerEventHandler(element, "click", function () {
            value(!value());
        });
    }
};

使用法：

<div data-bind="css: { highlighted: highlight }, toggleClick: highlight">
    random string
</div>

例：

http://jsfiddle.net/A28UD/1/

このアプローチにより、私の見解の一部が非常にきれいに保たれます。それが役に立てば幸い。

于 2014-05-13T15:13:45.447 に答える
21

あなたclick: highlight( !highlight() )は間違っています。Clickは関数を実行しようとします。バインディングが初期化されると、highlightはその値が何であれ返され、それがClickが実行しようとしているものです（trueまたはfalseあなたの場合）。あなたはこのようなことをする必要があります：

JavaScriptで、モデルに配置します。

self.toggleHighlight = function () { self.highlight(!self.highlight()) };

次に、バインディングを次のように変更しますclick: toggleHighlight

そのように：http：//jsfiddle.net/KDypD/1/

ページを最初にどのように表示するかを反映するために、ハイライトの初期値も調整する必要がある場合があります。

于 2013-02-14T04:43:28.150 に答える
7

別のオプションは、再利用可能なカスタム関数拡張機能を使用することです（パラメーターがなく、見た目がすっきりしているため、エクステンダーの代わりにカスタム関数が使用されます）。

ko.observable.fn.toggleable = function () {
    var self = this;
    self.toggle = function () {
        self(!self());
    };

    return self;
};

使用法

self.highlight = ko.observable(true).toggleable();

HTML

<div data-bind="css: { highlighted: highlight }, click: highlight.toggle">
    random string
</div>
于 2015-02-06T20:53:14.700 に答える
4

本当にインラインでやりたい場合：

<div data-bind="click: highlight.bind($root, !highlight()), css: { highlighted: highlight } ">
    random string
</div>

ここで、ハイライトはブール値の観測量です。

于 2014-12-26T20:30:27.023 に答える