Knockout内联编辑绑定

Kye*_*ica 4 jquery inline-editing knockout.js

我去寻找一个淘汰内联编辑绑定,但我发现的唯一一个除了jQuery之外还有外部依赖,或者不仅仅使用绑定.

所以我想我会分享我想出的简单的一个(其他答案当然是受欢迎的,特别是那些只使用淘汰赛的那些).

RP *_*yer 5

作为替代方案:我用于内联编辑的代码如下所示:

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

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,
            hidden: observable.editing,
            click: observable.editing.bind(null, true)
        });

        ko.applyBindingsToNode(input, {
            value: observable,
            visible: observable.editing,
            hasfocus: observable.editing
        });
    }
};
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/rniemeyer/Rg8DM/