Knockout Trimmed Observable

Adds a 'trimmed' function to observables for applying trim.

by joeyespo

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<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>

CSS

h1 {
    font-size: x-large;
}

h2 {
    font-size: large;
}

p {
     margin: 32px;
}

label {
    float: left;
    width: 100px;
}

pre {
    padding: 32px;
}

JavaScript

// The 'trimmed' extension
ko.subscribable.fn.trimmed = function() {
    return ko.computed({
        read: function() {
            return this().trim();
        },
        write: function(value) {
            this(value.trim());
            this.valueHasMutated();
        },
        owner: this
    });
};
// Note that `valueHasMutated` seems to be required for `<input>` elements to reflect changes. At least on Chrome.


// Legacy browser support
if (!String.prototype.trim) {
   String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ''); };
}


// The 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);