挖空内联编辑绑定

Question

我去寻找一个挖空的内联编辑绑定，但我找到的唯一一个有 jQuery 以外的外部依赖项，或者使用的不仅仅是一个绑定。

所以我想我会分享我想出的简单答案（当然欢迎其他答案，尤其是那些只使用淘汰赛的答案）。

Answer 1

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

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/

Answer 2

这是我的内联编辑绑定（小提琴），它依赖于jQuery进行一些DOM操作。

.HTML：

<p>
    Set an alarm for <span data-bind="inline: startTime"></span>
    using <span data-bind="inline: snoozeCount"></span> Snooze(s).
</p>

.JS：

ko.bindingHandlers.inline= {
    init: function(element, valueAccessor) {
        var span = $(element);
        var input = $('<input />',{'type': 'text', 'style' : 'display:none'});
        span.after(input);
        ko.applyBindingsToNode(input.get(0), { value: valueAccessor()});
        ko.applyBindingsToNode(span.get(0), { text: valueAccessor()});
        span.click(function(){
            input.width(span.width());
            span.hide();
            input.show();
            input.focus();
        });
        input.blur(function() { 
            span.show();
            input.hide();
        });
        input.keypress(function(e){
            if(e.keyCode == 13){
               span.show();
               input.hide();
           }; 
        });
    }
};

宽度是在单击函数中设置的，因为 Dom Ready 上的宽度不可靠：它有一半时间显示为 0。

我还为切换（布尔值）制作了一个，您只需单击即可切换：

ko.bindingHandlers.inlineToggle = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var displayType = allBindingsAccessor().type || "bool";
        var displayArray = [];
        if (displayType == "bool") {
            displayArray = ["True", "False"];
        } else if (displayType == "on") {
            displayArray = ["On", "Off"];
        } else {
           displayArray = displayType.split("/");
        } 
        var target = valueAccessor();  
        var observable = valueAccessor()
        var interceptor = ko.computed(function() {
            return observable() ? displayArray[0] : displayArray[1];
        });
        ko.applyBindingsToNode(element, { text: interceptor });
        ko.applyBindingsToNode(element, { click: function(){ target (!target())} });
    }
};

像这样应用（第二个参数是可选的）：

<span data-bind="inlineToggle: alert, type: 'on'"></span>

小提琴还包含一个用于select和multi-select，但现在多选会导致显示跳跃。我需要解决这个问题。

Answer 3

尽管答案已经被接受，但我相信我找到了更好的解决方案，所以我想分享一下。

我最终使用了此处文档中的内容 http://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html#example-supplying-additional-values-to-descendant-bindings

并提出了装订的粗略草案：

ko.bindingHandlers['textinlineeditor'] = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var observable = valueAccessor();
        var value = ko.utils.unwrapObservable(observable);
        var saveHandler = allBindingsAccessor().editorsavehandler || function (newValue) { observable(newValue); return true; };
        var inputType = allBindingsAccessor().editorinputtype || "text";            
        var vm = new inlineEditorViewModel({ val: value, saveHandler: saveHandler });
        $(element).append("<span data-bind="text: editableValue, hidden: editing"></span>");
        $(element).append("<input type="" + inputType + "" data-bind="value: editableValue, visible:editing"/>");
        $(element).append("<div class="pull-right"></div>");
        $(element).find("div.pull-right").append("<span class="glyphicon glyphicon-edit" aria-hidden="true" data-bind="click: edit, hidden: editing"></span>");
        $(element).find("div.pull-right").append("<span class="glyphicon glyphicon-check" aria-hidden="true" data-bind="click: save, visible:editing"></span>");
        $(element).find("div.pull-right").append("<span class="glyphicon glyphicon-remove-circle" aria-hidden="true" data-bind="click: cancelSave, visible:editing"></span>");
        var innerBindingContext = bindingContext.extend(vm);
        ko.applyBindingsToDescendants(innerBindingContext, element);
        return { controlsDescendantBindings: true };
    }
};

我在代码中使用的模型是

var inlineEditorViewModel = function (init) {
    var self = this;
    self.editableValue = ko.observable(init.val);
    self.lastEditableValue = ko.observable(init.val);
    self.editing = ko.observable(false);
    self.edit = function () {
        self.editing(true);
    };
    self.save = function () {
        if (init.saveHandler(self.editableValue())) {
            self.lastEditableValue(self.editableValue());
            self.editing(false);
        }
    };
    self.cancelSave = function () {
        self.editableValue(self.lastEditableValue());
        self.editing(false);
    };
};

在你的 HTML 中，你会像这样使用它

<div data-bind="textinlineeditor: name, editorsavehandler: saveName"></div>

注意：我正在使用引导程序，因此这是绑定 html 中的图标的来源。