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

Question

我是 knockoutJS 的新手，不知道如何使用 hasfocus 绑定(bind)来允许我“点击编辑”但需要一个按钮来保存。

我已经设置了我的代码(基于 RP Niemeyer 的两个令人难以置信的 fiddle )，当我点击一个标签时，我得到一个编辑输入框(如预期的那样)。问题出在使用 hasfocus 绑定(bind)上。

这是我的“clickToEdit”绑定(bind)(除了添加了接受和取消图标外，几乎与下面提到的第二个 fiddle 相同):

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

我希望输入框在可见时立即聚焦，但不希望它在模糊时隐藏。我想利用 protected 可观察对象(再次感谢 RP)在编辑时使用保存/取消。

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

Answer 1

一种方法是在名称字段中添加一个 focused 子可观察对象，将 hasfocus 绑定(bind)到它，并在选择项目时将其设置为 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 并且当使用“edit”模板时它会变得聚焦，但我可能会更像上面的示例一样明确说明它。