3

私はノックアウトJSにかなり慣れていないため、hasfocusバインディングを使用して「クリックして編集」できるようにする方法を理解できませんが、保存するにはボタンが必要です。

ラベルをクリックすると、編集入力ボックスが表示されるように (RP Niemeyer の 2 つの信じられないほどのフィドルに基づいて) コードをセットアップしました (期待どおり)。hasfocus バインディングを使用すると問題が発生します。

これは私の「clickToEdit」バインディングです（受け入れアイコンとキャンセルアイコンが追加されていることを除いて、以下で説明する2番目のフィドルと実質的に同じです）：

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

入力ボックスが表示されるとすぐにフォーカスされるようにしたいのですが、ぼかしで非表示になりたくありません。編集時に保存/キャンセルを使用するために、保護されたオブザーバブル（RPに感謝します）を利用したいと思います。

このフィドルの更新があった場合: http://jsfiddle.net/rniemeyer/X9rRa/編集ボタンをクリックしたときに最初のフィールドにフォーカスするか、このフィドルの更新: http://jsfiddle.net/rniemeyer /2jg2F/2/入力ボックスのフォーカスを外しても消えることはありませんでしたが、おそらくそこから取得できました。

4

1 に答える 1

1

これを行う 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/

サブオブザーバブルを避けてhasfocus: true、入力に a を置くこともできます。「編集」テンプレートが使用されると、フォーカスされますが、上記のサンプルのように、もう少し明示的になるでしょう。

于 2012-10-28T02:54:03.820 に答える