3

我对 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/不聚焦输入框并没有导致它消失，我可能可以从那里拿走它。

4

1 回答 1

1

一种方法是focused在 name 字段中添加一个 sub-observable，绑定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在输入上放一个 a ，当使用“编辑”模板时它会变得聚焦，但我可能会像上面的示例一样更明确一点。

于 2012-10-28T02:54:03.820 回答