ノックアウトカスタムバインディング作成方法_JavaScriptスキル

概要

前の記事でリストした KO の組み込みバインディング タイプ (値、テキストなど) に加えて、カスタム バインディングを作成することもできます。

バインディング ハンドラーを登録します

ko.bindingHandlers.yourBindingName = {
  init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    // This will be called when the binding is first applied to an element
    // Set up any initial state, event handlers, etc. here
  },
  update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    // This will be called once when the binding is first applied to an element,
    // and again whenever any observables/computeds that are accessed change
    // Update the DOM element based on the supplied values here.
  }
}; 

次に、任意の dom 要素でカスタム バインディングを使用できます。

<div data-bind="yourBindingName: someValue"> </div> 

注: ハンドラーで init コールバックと update コールバックの両方を提供する必要はなく、どちらか一方を提供することができます。

コールバックを更新

名前が示すように、監視可能な属性が更新されると、ko は自動的に更新コールバックを呼び出します。

次のパラメータがあります:

要素: このバインドされた dom 要素を使用します。

valueAccessor: 現在バインドされているモデル属性値は、valueAccessor() を呼び出すことで取得できます。ko.unwrap(valueAccessor()) を呼び出すと、より簡単に監視可能な値と通常の値を取得できます。

allBindings: この dom 要素のモデルにバインドされたすべての属性値。たとえば、callBindings.get('name') を呼び出して、バインドされた name 属性値を返します (存在しない場合は、未定義を返します)、またはcall allBindings.has(' name') は、name が現在の dom にバインドされているかどうかを決定します。

viewModel : Knockout.3x では非推奨となり、現在の viewModel を取得するには bindingContext.$data または bindingContext.$rawData を使用できます。

bindingContext: バインディング コンテキスト。bindingContext.$data、bindingContext.$parent、bindingContext.$parents などを呼び出してデータを取得できます。

次に例を見てください。この場合、可視バインディングを使用して要素の可視性を制御し、アニメーション効果を追加できます。

このカスタム バインディングを次のように使用できます。

ko.bindingHandlers.slideVisible = {
  update: function(element, valueAccessor, allBindings) {
    // First get the latest data that we're bound to
    var value = valueAccessor();
    // Next, whether or not the supplied model property is observable, get its current value
    var valueUnwrapped = ko.unwrap(value);
    // Grab some more data from another binding property
    var duration = allBindings.get('slideDuration') || 400; // 400ms is default duration unless otherwise specified
    // Now manipulate the DOM element
    if (valueUnwrapped == true)
      $(element).slideDown(duration); // Make the element visible
    else
      $(element).slideUp(duration);  // Make the element invisible
  }
}; 

初期コールバック

<div data-bind="slideVisible: giftWrap, slideDuration:600">You have selected the option</div>
<label><input type="checkbox" data-bind="checked: giftWrap" /> Gift wrap</label>
<script type="text/javascript">
  var viewModel = {
    giftWrap: ko.observable(true)
  };
  ko.applyBindings(viewModel);
</script> 

ko はバインディングを使用するすべての dom 要素に対して init 関数を呼び出します。これには 2 つの主な目的があります:
(1) dom 要素の初期化状態を設定します。

(2) いくつかのイベント ハンドラーを登録します。たとえば、ユーザーが dom 要素をクリックまたは変更すると、監視属性のステータスを変更できます。

ko は、更新コールバックとまったく同じパラメータのセットを使用します。

前の例の続きで、ページが最初に表示されるときに、slideVisible で要素の表示状態を (アニメーション効果なしで) 設定し、後で変更されたときにアニメーション効果が実行されるようにすることができます。その方法は次のとおりです。それを行うには:

giftWrap は初期化され、false (ko.observable(false)) として定義されます。初期化中に関連付けられた DIV は非表示になり、ユーザーがチェックボックスをクリックした場合にのみ DIV が表示されます。

監視可能な値が変更されたときに、更新コールバックを使用して DOM 要素を更新する方法がわかりました。たとえば、ユーザーがアクションを実行すると、監視可能な値が更新されることもあります。

ko.bindingHandlers.slideVisible = {
  init: function(element, valueAccessor) {
    var value = ko.unwrap(valueAccessor()); // Get the current value of the current property we're bound to
    $(element).toggle(value); // jQuery will hide/show the element depending on whether "value" or true or false
  },
  update: function(element, valueAccessor, allBindings) {
    // Leave as before
  }
}; 

など。

これで、要素の「フォーカス性」バインディングを介して、監視可能な値を読み書きできるようになります。

ko.bindingHandlers.hasFocus = {
  init: function(element, valueAccessor) {
    $(element).focus(function() {
      var value = valueAccessor();
      value(true);
    });
    $(element).blur(function() {
      var value = valueAccessor();
      value(false);
    });
  },
  update: function(element, valueAccessor) {
    var value = valueAccessor();
    if (ko.unwrap(value))
      element.focus();
    else
      element.blur();
  }
}; 

上記の内容はエディターで共有したKnockoutカスタムバインディングの作成方法です。