ノックアウトjsを使ってテキストエリアを自動拡張する

Question

私は、keyupイベントのテキストエリアの高さを自動拡張するロジックを実装しました。しかし、ノックアウトカスタムバインディングを介して値がテキストエリアにバインドされると、そのテキストエリアの高さを初期化します。どんな解決策ですか？ （jQueryのまたは任意の他のライブラリを使用せず、唯一のKnockoutJSを使用することにより）

Answer 1

イベントを使用してサイズ変更をトリガーすることについて強くお勧めします。代わりに、textInputバインディングを使用して、オブザーバブルの入力を追跡し、その変更をサブスクライブすることができます。

はここでの例です：結合が観察value変数に任意の入力変更を書き込み

• textInput：これは動作します

  <textarea data-bind="textInput: value, autoResize: value"></textarea> 
  

  ko.bindingHandlers.autoResize = { 
      init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
      ko.computed(function() { 
       ko.unwrap(valueAccessor()); 
       resizeToFitContent(element); 
      }) 
      } 
  }; 
  

  。

• computedは、この値を使用してサイズ変更をトリガーします。これにより、自動的に購読が作成されます。

それは同様event同等を示すRight Mouse Button > cut

例のようなものを扱うので、これは​​アプローチよりも優れている：

var resizeToFitContent = function(el) { 
 
    // http://stackoverflow.com/a/995374/3297291 
 
    el.style.height = "1px"; 
 
    el.style.height = el.scrollHeight + "px"; 
 
} 
 

 

 
ko.bindingHandlers.autoResize = { 
 
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
 
    ko.computed(function() { 
 
     ko.unwrap(valueAccessor()); 
 
     resizeToFitContent(element); 
 
    }) 
 
    } 
 
}; 
 

 
ko.applyBindings({ 
 
    value: ko.observable("Test"), 
 
    
 
    onKey: function(data, event) { 
 
    \t resizeToFitContent(event.target); 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<textarea data-bind="textInput: value, autoResize: value"></textarea> 
 
<textarea data-bind="event: { keyup: onKey }"></textarea>

Answer 2

あなたは、すべてのテキストエリアにautoresize()を適用することカスタムバインディングを作成することができます

：

ko.bindingHandlers.jqAutoresize = { 
    init: function(element, valueAccessor) { 
     var options = ko.utils.unwrapObservable(valueAccessor()) || {}; 

     $(element).autoResize(options); 
    } 
}; 

は、このようなあなたのビューを更新します。

<div data-bind="foreach: Rows" > 
    <textarea data-bind="jqAutoresize: {}, value: RowText" ></textarea> 
</div>