1

現在、表示されているスパンと非表示の入力要素がある Web ページのカスタム バインディングを作成しようとしています。スパンをクリックすると、スパンが消えて入力が表示されます。入力がフォーカスを失うと、スパンは入力からの新しい値で更新されます。ただし、何らかの理由でblur、スパンをクリックするたびに関数が再度バインドされます。これは私が望んでいるものではありません。どうすればこれを修正できますか?

HTML

<!-- ko foreach: formula -->
  <span data-bind="text: $data, attr: {name: $index}, convert: $index()"></span>
  <input data-bind="value: $data, attr: {name: $index}" class="hide"/><br/>
<!-- /ko -->

JavaScript

ko.bindingHandlers.convert = {
  init: function(element, valueAccessor) {
    $(element).click(function() {
      var index = valueAccessor();
      var inputName = "input[name="+index+"]";
      $(element).addClass("hide");
      $(inputName).removeClass("hide").focus().blur(function() {
        console.log("firing");
        $(inputName).addClass("hide");
        $(element).removeClass("hide");
        $(element).text($(inputName).val());
      });
    });
  }
};

スパンを 2 回クリックすると、

firing
firing
firing

私のコンソールでは、firing2回しか取得できないはずです。

注: hasFocusKnockout チュートリアルの例はすべての入力フィールドにバインドされるため、従うことはできません。入力フィールドは、クリックされている特定のスパンに対してのみトグルする必要があります。

4

1 に答える 1

3

これはまったく謎ではありません。そのコードを見てください：

$(element).click(function() {
    /* some code */
    $(inputName).blur(function() {
        /* some code */
    });
});

クリックするたびにblurハンドラが追加されます。次のようにハンドラーを削除してみてください。

$(element).click(function() {
    var $element = $(this);
    var index = valueAccessor();
    var inputName = "input[name="+index+"]";
    var $input = $(inputName);
    $element.addClass("hide");
    $input.unbind('blur');
    $inputName.removeClass("hide").focus().blur(function() {
        console.log("firing");
        $input.addClass("hide");
        $element.removeClass("hide");
        $element.text($input.val());
    });
});

チェーンできると思いますが、テストしていません。

于 2012-06-12T09:04:43.027 に答える