diamondcoder/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
  </head>
  <body>

<div class='liveExample'>
  simple:
  <textarea data-bind="hasFocus: isFocus, attr: { rows: lines }"> </textarea>
  <br />
  advanced:
  <textarea data-bind="attr: { rows: lines2 }, textInput: content2"> </textarea>
</div>
    <script src="script.js"></script>
  </body>
</html>

## script.js
var myModel = function() {
  //to make sure we're working against the myModel scope
  var self = this;

  // simple expanding textarea
  self.lines = ko.observable(1);
  self.isFocus = ko.observable(false);
  self.isFocus.subscribe(function(isFocus) {
    self.lines(isFocus ? 3 : 1);
  });

  // expanding textarea by amount linebreaks coming in from content2 + 1
  self.lines2 = ko.observable(2);
  self.content2 = ko.observable('');
  self.content2.subscribe(function (content2) {
    var linebreaks = content2.split(/\r\n|\r|\n/).length;
    self.lines2(linebreaks + 1);
  });
}

ko.applyBindings(new myModel());

## style.css
Empty file
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>repl.it</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
	</head>
	<body>

	<div class='liveExample'>
	simple:
	<textarea data-bind="hasFocus: isFocus, attr: { rows: lines }"> </textarea>
	<br />
	advanced:
	<textarea data-bind="attr: { rows: lines2 }, textInput: content2"> </textarea>
	</div>
	<script src="script.js"></script>
	</body>
	</html>
	var myModel = function() {
	//to make sure we're working against the myModel scope
	var self = this;

	// simple expanding textarea
	self.lines = ko.observable(1);
	self.isFocus = ko.observable(false);
	self.isFocus.subscribe(function(isFocus) {
	self.lines(isFocus ? 3 : 1);
	});

	// expanding textarea by amount linebreaks coming in from content2 + 1
	self.lines2 = ko.observable(2);
	self.content2 = ko.observable('');
	self.content2.subscribe(function (content2) {
	var linebreaks = content2.split(/\r\n\|\r\|\n/).length;
	self.lines2(linebreaks + 1);
	});
	}

	ko.applyBindings(new myModel());