Question

我已经实现了在keyup事件中自动扩展textarea高度的逻辑。但是，我希望textarea在通过敲除自定义绑定将值绑定到textarea后也初始化其高度。有解决方案吗（仅使用KnockoutJS，不使用jQuery或任何其他库。）

Answer 1

我强烈建议不要使用事件来触发调整大小。相反，您可以使用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);
    })
  }
};

这是因为：

textInput绑定将任何输入更改写入可观察的value变量。
computed使用此值来触发调整大小。这会自动创建订阅。

这比keydown方法更好，因为它处理Right Mouse Button > cut

之类的内容

显示event等价物的示例：

＆＃13;

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) {
  	resizeToFitContent(event.target);
  } 
});

＆＃13;

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

＆＃13;

Answer 2

您可以创建将autoresize()应用于所有textareas的自定义绑定：

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>

用淘汰赛自动增长textarea

2 个答案: