淘汰赛内联编辑绑定 [英] Knockout Inline Edit Binding

问题描述

我一直在寻找淘汰赛内联编辑绑定，但是我发现的仅有外部依赖项，或使用的不只是绑定.

I went looking for a knockout inline edit binding, but the only ones I found had external dependencies other than jQuery, or used more than just a binding.

所以我想我会分享我想出的一个简单的答案(当然，其他答案也很受欢迎，尤其是那些仅使用淘汰赛的答案).

So I figured I would share the simple one I came up with (other answer's of course welcome, especially those that only use knockout).

推荐答案

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

Just as an alternative: the code that I have used for inline editing looks like:

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
        });
    }
};

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

这篇关于淘汰赛内联编辑绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！