녹아웃 커스텀 바인딩 생성 방법_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 콜백과 업데이트 콜백을 모두 제공할 필요는 없으며 둘 중 하나만 제공해도 됩니다.

콜백 업데이트

이름에서 알 수 있듯이 관찰 가능한 모니터링 속성이 업데이트되면 ko가 자동으로 업데이트 콜백을 호출합니다.

다음 매개변수가 있습니다:

요소: 이 바인딩된 DOM 요소를 사용합니다.

valueAccessor: 현재 바인딩된 모델 속성 값은 valueAccessor()를 호출하여 얻을 수 있습니다. ko.unwrap(valueAccessor())을 호출하면 관찰 가능한 값과 일반 값을 더 편리하게 얻을 수 있습니다.

allBindings: 이 dom 요소에서 모델에 바인딩된 모든 속성 값. 예를 들어 callBindings.get('name')을 호출하여 바인딩된 이름 속성 값을 반환하거나(존재하지 않는 경우 정의되지 않음 반환) 또는 allBindings.has(' name') 호출은 name이 현재 dom에 바인딩되어 있는지 확인합니다.

바인딩 컨텍스트: 바인딩 컨텍스트. 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 함수를 호출하며 두 가지 주요 목적이 있습니다.

(1) dom 요소의 초기화 상태를 설정합니다.

(2) 일부 이벤트 핸들러를 등록합니다. 예를 들어 사용자가 dom 요소를 클릭하거나 수정하면 모니터링 속성의 상태를 변경할 수 있습니다.

ko는 업데이트 콜백과 정확히 동일한 매개변수 세트를 사용합니다.

앞의 예에 이어 페이지가 처음 표시될 때 SlideVisible에서 요소의 가시성 상태(애니메이션 효과 없이)를 설정하고 나중에 변경될 때 애니메이션 효과가 실행되도록 할 수 있습니다. 방법은 다음과 같습니다. 그것을 하려면:

giftWrap이 초기화되고 false(ko.observable(false))로 정의됩니다. 초기화 중에 관련 DIV가 숨겨지며, 이후 사용자가 확인란을 클릭할 때만 DIV가 표시됩니다.

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

이제 관찰 가능한 값이 변경될 때 업데이트 콜백을 사용하여 DOM 요소를 업데이트하는 방법을 알게 되었습니다. 이제 다른 방법을 사용하여 이를 수행할 수 있습니다. 예를 들어 사용자가 작업을 수행하면 관찰 가능한 값이 업데이트될 수도 있습니다. 예:

이제 요소의 "focusedness" 바인딩을 통해 관찰 가능한 값을 읽고 쓸 수 있습니다.

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 커스텀 바인딩 생성 방법입니다.

<p>Name: <input data-bind="hasFocus: editingName" /></p>
<!-- Showing that we can both read and write the focus state -->
<div data-bind="visible: editingName">You're editing the name</div>
<button data-bind="enable: !editingName(), click:function() { editingName(true) }">Edit name</button>
<script type="text/javascript">
  var viewModel = {
    editingName: ko.observable()
  };
  ko.applyBindings(viewModel);
</script>