knockout.js - data-bind text default value

Question

In knockout.js I have a very standard field that looks like this:

<label data-bind="text: JobTitle"></label> 

What I'd like is to have a default value specified in here if the text value is null, for example "No Job Title Specified".

Is this possible to do in knockout.js?

Thanks.

Answer 1

The shortest / easiest way is probably:

<label data-bind="text: JobTitle()||'No Job Title Specified'"></label> 

Working example:

var ViewModel = function() {      this.jobTitle = ko.observable();  };     ko.applyBindings(new ViewModel());

body { font-family: arial; font-size: 14px; }  .liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }  .liveExample input { font-family: Arial; }  .liveExample b { font-weight: bold; }  .liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }  .liveExample select[multiple] { width: 100%; height: 8em; }  .liveExample h2 { margin-top: 0.4em; font-weight: bold; font-size: 1.2em; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>  <div class='liveExample'>         <p>Job Title: <input data-bind='value: jobTitle' /></p>       <h2 data-bind="text: jobTitle()||'No Job Title Specified'"></h2>    </div>

Or JS Fiddle: http://jsfiddle.net/735qC/43/