0

I need to trim all my observables. How to do that without the html binding? I've tried Automatically trim whitespace from all observable values but it doesnt work for me. I use knockout version 3.0.0 and i've used both latest chrome and latest ie.

<div class="editor-label">
    <b>Name: </b>
</div>
<div class="editor-field">
    <input data-bind='value: name, valueUpdate: "afterkeydown"' placeholder="Enter name" /><br />
    <span style="font-weight:bold" data-bind="text: name"></span>
</div><br />

<div class="editor-label">
    <b>Age: </b>
</div>
<div class="editor-field">
    <input data-bind='value: age, valueUpdate: "afterkeydown"' placeholder="Enter age" /><br />
    <span style="font-weight:bold" data-bind="text: age"></span>
</div>


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

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

var ViewModel = function () {
    var self = this;
    self.name = ko.observable().extend({ required: true }).trimmed();
    self.age = ko.observable().extend({ required: true }).trimmed();
};

ko.applyBindings(new ViewModel());

Exception: Object doesn't support property or method 'trimmed'

Community
  • 1
  • 1
Henrik
  • 1,797
  • 4
  • 22
  • 46
  • What version of knockout are you using? – Nathan Fisher Mar 27 '14 at 22:58
  • 1
    Also what browser are you using to test this? http://jsfiddle.net/g9ezw/27/ uses knockout 3.1.0 and on Chrome 33.0.1750.154 appears to work fine for me. – Nathan Fisher Mar 27 '14 at 23:03
  • @NathanFisher Your fiddle works on all versions of Knockout that i tested from 2.1.0 onwards – Robert Slaney Mar 28 '14 at 00:11
  • @NathanFisher You also need to be mindful of the call to `valueHasMutated`. Since the trimmed function is added to subscribable, `this` in the write function could refer to a computed which doesn't have valueHasMutated function. You should use notifySubscribers instead – Robert Slaney Mar 28 '14 at 00:13
  • 2
    Henrik, whilst I can't work out why your trimmed extension isn't found, the `ko.computed` has issues if your observable value is undefined or null. `this().trim()` will throw an exception, as will `this(value.trim())`. – Robert Slaney Mar 28 '14 at 00:26
  • Are you using ViewModel as a constructor ie `var viewModel = new ViewModel()` – Robert Slaney Mar 28 '14 at 00:29
  • Updated my post. Im using knockout 3.0.0 and browsers i've tried is latest chrome and ie. – Henrik Mar 28 '14 at 06:00
  • @RobertSlaney Thank you. That was correct. I added '' to the observables and now the trim working. But it only trims at beginning and end, i want all whitespaces to be removed. Is it possible to do so? – Henrik Mar 28 '14 at 06:49
  • 1
    Change your regex. `^\s+` matches at the start, `\s+$` matches at the end. Change it to just `/\s/g` – Robert Slaney Mar 30 '14 at 23:26
  • @NathanFisher Fix read when observable is undefined or null: `read: function () { if (!this()) this(''); return this().trim(); }` – Jorgelig Jul 23 '15 at 18:44

0 Answers0