淘汰赛自定义绑定处理程序(Knockout custom binding handler)

我无法得到这个工作： 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());

Answer 1:

你的问题是在这条线：

visible: !observable.editing

这将评估为假，并会保持下去。 即使你!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/

文章来源: Knockout custom binding handler