joeyespo/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Example of Knockout Trimmed Observables</title>
  <style>
    h1 { font-size: x-large; }
    h2 { font-size: large; }
    p { margin: 32px; }
    pre { padding: 32px; }
    label { float: left; width: 100px; }
  </style>
  <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
  <script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
  <script src="ko-trimmed-observables.js"></script>
  <script>
    $(function() {
      // An example model, one regular observable, the other calling 'trimmed()'
      var vm = {
          regular: ko.observable('         hello!          '),
          trimmed: ko.observable('         hello!          ').trimmed()
      }
      // Apply bindings
      ko.applyBindings(vm);
    });
  </script>
</head>
<body>
  <h1>Trimmed Observable Example</h1>
  <p>
      <label for="regular">Regular:</label>
      <input name="regular" data-bind="value: regular" />
  </p>
  <p>
      <label for="trimmed">Trimmed:</label>
      <input name="trimmed" data-bind="value: trimmed" />
  </p>

  <h2>Values</h2>
  <pre>
  regular = '<span data-bind="text: regular"></span>'

  trimmed = '<span data-bind="text: trimmed"></span>'
  </pre>
</body>
</html>

## ko-trimmed-observables.js
// Trimmed Observables

// Adds the 'trimmed' function
ko.subscribable.fn.trimmed = function() {
    return ko.computed({
        read: function() {
            return this().trim();
        },
        write: function(value) {
            this(value.trim());
            this.valueHasMutated();
        },
        owner: this
    });
};
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Example of Knockout Trimmed Observables</title>
	<style>
	h1 { font-size: x-large; }
	h2 { font-size: large; }
	p { margin: 32px; }
	pre { padding: 32px; }
	label { float: left; width: 100px; }
	</style>
	<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
	<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
	<script src="ko-trimmed-observables.js"></script>
	<script>
	$(function() {
	// An example model, one regular observable, the other calling 'trimmed()'
	var vm = {
	regular: ko.observable(' hello! '),
	trimmed: ko.observable(' hello! ').trimmed()
	}
	// Apply bindings
	ko.applyBindings(vm);
	});
	</script>
	</head>
	<body>
	<h1>Trimmed Observable Example</h1>
	<p>
	<label for="regular">Regular:</label>
	<input name="regular" data-bind="value: regular" />
	</p>
	<p>
	<label for="trimmed">Trimmed:</label>
	<input name="trimmed" data-bind="value: trimmed" />
	</p>

	<h2>Values</h2>
	<pre>
	regular = '<span data-bind="text: regular"></span>'

	trimmed = '<span data-bind="text: trimmed"></span>'
	</pre>
	</body>
	</html>
	// Trimmed Observables

	// Adds the 'trimmed' function
	ko.subscribable.fn.trimmed = function() {
	return ko.computed({
	read: function() {
	return this().trim();
	},
	write: function(value) {
	this(value.trim());
	this.valueHasMutated();
	},
	owner: this
	});
	};