2

これを機能させるのに問題があります: http://jsfiddle.net/2jg2F/1/

私は基本的に、誰かがテキストをクリックすると入力ボックスに変わるリンクを作りたいと思っています。ノックアウト 2.0 と 2.1 を試しました。

HTML

<div data-bind="clickToEdit : message"> </div>

Javascript

ko.bindingHandlers.clickToEdit = {
    init: function(element, valueAccessor) {
        var observable = valueAccessor(),
            link = document.createElement("a"),
            input = document.createElement("input");

        element.appendChild(link);
        element.appendChild(input);

        observable.editing = ko.observable(false);
        ko.applyBindingsToNode(link, {
            text: observable,
            visible: !observable.editing,
            click: function() {
                observable.editing(true);
            }
        });

        ko.applyBindingsToNode(input, {
            value: observable,
            visible: observable.editing,
            hasfocus: observable.editing
        });
    }
};

function ViewModel() {
    this.message = ko.observable("Click on me to edit");
}
ko.applyBindings(new ViewModel());
4

1 に答える 1

4

あなたの問題はこの行にあります：

visible: !observable.editing

これは false と評価され、そのままになります。しても!observable.editing()、それは静的な真の値になります。

したがって、それを処理するにはいくつかの方法があります。

1 - 反対の値を可視バインディングに渡すだけのクイックhiddenバインディング ハンドラーを作成することをお勧めします。書き方はいくつかありますが、簡単に書くと次​​のようになります。

ko.bindingHandlers.hidden = {
    update: function(element, valueAccessor) {
        var isVisible = !ko.utils.unwrapObservable(valueAccessor());
        ko.bindingHandlers.visible.update(element, function() { return isVisible; });
    }        
};

これで、次を使用できます。

hidden: observable.editing

ここにサンプルがあります：http://jsfiddle.net/rniemeyer/2jg2F/2/

2 - 別の選択肢は、反対を返す計算されたオブザーバブルを追加することです。何かのようなもの：

    observable.editing = ko.observable(false);
    observable.notEditing = ko.computed(function() {
       return !observable.editing(); 
    });

notEditing次に、次のようにバインドします。

http://jsfiddle.net/rniemeyer/2jg2F/3/

于 2012-09-03T18:31:01.287 に答える