javascript - 行属性的文本区域 knockout attr 绑定(bind)不起作用

Question

我想通过knockout 2.3.0改变texterea的高度

我将 texterea 的值绑定(bind)到“FileData”可观察字段 并希望将 texterea rows 属性更改为“FileData”中的行数

值绑定(bind)工作正常，但 attr 不起作用

var self = this;
self.FileData = ko.observable("");

self.lineBreakCount = function(str) { 
  /* counts \n */ 
  try { 
    return ((str.match(/[^\n]*\n[^\n]*/gi).length)) + 1; 
  } catch (e) {
    return 0; 
  } 
}

self.buttonClick = function () {
$.get(url, {  })
.success(function (serverData) { self.FileData(serverData);})
}

<button type="button" data-bind="click: buttonClick">Click Me</button>
<textarea readonly="readonly" data-bind="value: FileData, attr: { 'rows': lineBreakCount(FileData)}"></textarea>

Answer 1

您的lineBreakCount预计 string ，但你传递给它的是 observable 包含 string 。

要解决此问题，请在绑定(bind) ( lineBreakCount(FileData()) ) 或方法 ( str().match ) 中解开您的可观察对象

var VM = function() {
  var self = this;
  self.FileData = ko.observable("");

  self.lineBreakCount = function(str) {
    /* counts \n */
    try {
      return ((str.match(/[^\n]*\n[^\n]*/gi).length)) + 1;
    } catch (e) {
      return 0;
    }
  }

  self.buttonClick = function() {};
};

ko.applyBindings(new VM());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<button type="button" data-bind="click: buttonClick">Click Me</button>
<textarea data-bind="textInput: FileData, attr: { 'rows': lineBreakCount(FileData())}"></textarea>