Knockout.js: Set a default text if a binding has a given value

Question

I'd like to reset the value of an input field ( text='' ) whenever model.id is null.

How to bind the input value to respond to a certain value of an observable object? Something that would look like:

<input type="text" data-bind="text: if (model.value == null) { '' }" />

Answer 1

You can use ? operator in data-bind attribute:

<input type="text" data-bind="value: model.id() == null ? 'Default Value' : model.value()" />

Answer 2

In your viewmodel, initiate value of the property as follow :

var model.value = ko.observable('');

In HTML, you don't have to use confitional expression

data-bind="text: model.value"

Answer 3

check these codes

<input type="text" data-bind="value: id() == true? 'Value is Red' : value()" />


function viewModel() {
    this.id = ko.observable(true);
    this.value = ko.observable("Value is Green");
}
ko.applyBindings(new viewModel());

http://jsfiddle.net/d4SKr/

Answer 4

The correct answer should be to create a computed observable to get the label.

self.getLabel = ko.pureComputed(function() {
    return this.value() === null ? 'Value is red' : value();
});

<input type="text" data-bind="text: getLabel" />