녹아웃 데이터 바인딩을 사용하여 내용을 기반으로 텍스트 영역 높이를 초기화합니다.

Question

현재 keyup 이벤트의 텍스트 영역 높이를 확장하고 축소하고 있습니다. 그러나 일단 텍스트 영역 knockout 사용자 지정 바인딩을 통해 텍스트 영역에 바인딩 된 일단 높이 높이기를 원합니다. 어떤 해결책? (단지 자바 스크립트의 사용으로) 당신이 할 수있는 사용자 정의 binding-handler을 등록하는 거 필요가있어

var textElement = $textBox.get(0); 
var textElementOriginalHeight = $textBox.height(); 

while ($textBox.height() > textElementOriginalHeight && textElement.scrollHeight < textElement.offsetHeight) { 
       $textBox.height($textBox.height() - 1); 
      } 

      var h = 0; 

      while (textElement.scrollHeight > textElement.offsetHeight && h !== textElement.offsetHeight) { 
       h = textElement.offsetHeight; 
       $textBox.height($textBox.height() + 1); 
      } 

Answer 1

현재 키까지 handelling 코드 (모든 JQuery와 라이브러리를 추가하지 않고). 뭔가 같은 :

이

(function(ko) 
{ 
    function handleAutoFit(textElement, val) 
    { 
     if (!textElement.value) 
      textElement.value = val; 

     var $textBox = $(textElement); 
     var textElementOriginalHeight = $textBox.height(); 

     while ($textBox.height() > textElementOriginalHeight && textElement.scrollHeight < textElement.offsetHeight) { 
      $textBox.height($textBox.height() - 1); 
     } 

     var h = 0; 

     while (textElement.scrollHeight > textElement.offsetHeight && h !== textElement.offsetHeight) { 
      h = textElement.offsetHeight; 
      $textBox.height($textBox.height() + 1); 
     } 
    } 

    ko.bindingHandlers.autoFit = { 
     update: function (element, valueAccessor) { 
      var val = ko.unwrap(valueAccessor()); 
      handleAutoFit(element, val); 
     } 
    }; 
})(ko); 

HTML :

<textarea data-bind="autoFit: someObservable, value: someObservable, valueUpdate: 'afterkeydown'"></textarea> 

또는 당신이 넉 아웃 3.1 이상을 사용하는 경우 :

<textarea data-bind="autoFit: someObservable, textInput: someObservable"></textarea> 

이 Fiddle