knockout.js 点击编辑，不切换回模糊

Question

我对 knockoutJS 还很陌生，不知道如何使用 hasfocus 绑定来允许我“点击编辑”，但需要一个按钮来保存。

我已经设置了我的代码（基于 RP Niemeyer 的两个令人难以置信的小提琴），这样当我点击一个标签时，我会得到一个编辑输入框（如预期的那样）。问题在于使用 hasfocus 绑定。

这是我的“clickToEdit”绑定（实际上与下面提到的第二个小提琴相同，除了添加了接受和取消图标）：

ko.bindingHandlers.clickToEdit = {
    init: function(element, valueAccessor) {
        var observable = valueAccessor(),
            link = document.createElement("a"),

            editField = document.createElement("span");
            input = document.createElement("input");
                input.setAttribute("id", "txt_" + element);
                input.setAttribute("placeholder", observable());
            acceptButton = document.createElement("i");
                acceptButton.className = "icon-ok";
                acceptButton.setAttribute("data-bind", "click: $root.acceptElementEdit");
            cancelButton = document.createElement("i");
                cancelButton.className = "icon-repeat";
                cancelButton.setAttribute("data-bind", "click: $root.cancelElementEdit");
            editField.appendChild(input);
            editField.appendChild(acceptButton);
            editField.appendChild(cancelButton);

            element.appendChild(link);
            element.appendChild(editField);

        observable.editing = ko.observable(false);
        ko.applyBindingsToNode(link, {
            text: observable,
            hidden: observable.editing,
            click: function() {
                observable.editing(true);
            }
        });

        //Apply 'editing' to the whole span
        ko.applyBindingsToNode(editField, {
            visible: observable.editing,
        });
        //Apply the value and the hasfocus bindings to the input field
        ko.applyBindingsToNode(editField.children[0], {
            value: observable,
            //hasfocus: true
        });
    }
};

我希望输入框在可见时立即成为焦点，但我不希望它在模糊时隐藏。我想使用受保护的 observable（再次感谢 RP）在编辑时使用保存/取消。

如果此小提琴有更新：http://jsfiddle.net/rniemeyer/X9rRa/ 将在单击编辑按钮时聚焦第一个字段，或者此小提琴的更新：http://jsfiddle.net/rniemeyer/2jg2F/2/ 不聚焦输入框不会导致它消失，我可能可以从那里拿走它。

Answer 1

这样做的一种方法是将focused 子可观察对象添加到名称字段，将hasfocus 绑定到它，并在选择项目时将其设置为true。

所以，一个项目看起来像：

var Item = function(name, quantity) {
    this.name = ko.protectedObservable(name);
    this.name.focused = ko.observable();
    this.quantity = ko.protectedObservable(quantity);
};

当你选择一个项目时：

this.editItem = function(item) {
    self.selectedItem(item);
    item.name.focused(true);
};

这是一个示例：http://jsfiddle.net/rniemeyer/ks3Cj/

你甚至可以避免 sub-observable 并在输入上放一个 hasfocus: true ，当使用“编辑”模板时它会变得聚焦，但我可能会更明确一点，就像在示例中一样以上。