Question

I am trying to understand knockout. And there is a thing I don’t understand. We have html:

<p>
<input type='checkbox' data-bind="checked: hasCellphone" />
I have a cellphone</p>

<p>
Your cellphone number:
<input type='text' name='cell' data-bind="value: cellphoneNumber, enable: hasCellphone" /></p>

<button data-bind="enable: document.getElementsByName("cell")[0].value != '555'">
Do something</button>

And JS:

function AppViewModel() {   
this.hasCellphone = ko.observable(false);
this.cellphoneNumber = ko.observable("");}

ko.applyBindings(new AppViewModel());

So, enable for input works, but not for the button, even if I enter ‘555’ into the input it still stays enabled.

Answer 1

The example on the knockout page is a bit misleading. The enable binding takes any value but for automatic updates it must be an observable. document.getElementsByName("cell")[0].value != '555' is not an observable.

You can fix the code easily by adding a cellphoneNumberValid observable to the model which is based on the value of the cellphoneNumber observable:

html

<p>
    <input type='checkbox' data-bind="checked: hasCellphone" />
    I have a cellphone
</p>

<p>
    Your cellphone number:
    <input type='text' name='cell' data-bind="
            value: cellphoneNumber,
            valueUpdate: 'afterkeydown',
            enable: hasCellphone" />
</p>

Do something

js

function parseAreaCode(s) {
    // just a dummy implementation
    return s.substr(0, 3);
}

function AppViewModel() {   
    this.hasCellphone = ko.observable(false);
    this.cellphoneNumber = ko.observable("");
    this.cellphoneNumberValid = ko.computed(function() {
        return parseAreaCode(this.cellphoneNumber()) != '555';
    }, this);
}

ko.applyBindings(new AppViewModel());

jsfiddle

http://jsfiddle.net/bikeshedder/eL26h/