Question

我去寻找一个淘汰内联编辑绑定，但我发现的只有jQuery或external dependencies以外的used more than just a binding。

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

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

这是我的inline edit binding (fiddle)，它依赖于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

文档中的内容

并提出了这份具有约束力的草稿：

public class Pizza extends AbstractList {
...
}

我在代码中使用的模型是

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

在您的HTML中，您会像

一样使用它

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

注意：我正在使用Bootstrap，因此绑定html中的图标来自。

Knockout内联编辑绑定

3 个答案: