Edit in JSFiddle

function AppData() {
    this.firstName = ko.observable('John');
    this.lastName = ko.observable('Burns');
    this.prefix = ko.observable('Dr.');
    this.computedLog = ko.observable('Log: ');
    this.pureComputedLog = ko.observable('Log: ');
    this.fullName = ko.computed(function () {
        var value = this.prefix() + " " + this.firstName() + " " + this.lastName();
        // Normally, you should avoid writing to observables within a pure computed 
        // observable (avoiding side effects). But this example is meant to demonstrate 
        // its internal workings, and writing a log is a good way to do so.
        this.computedLog(this.computedLog.peek() + value + '; <br />');
        return value;
    }, this);

    this.pureFullName = ko.pureComputed(function () {
        var value = this.prefix() + " " + this.firstName() + " " + this.lastName();
        // Normally, you should avoid writing to observables within a pure computed 
        // observable (avoiding side effects). But this example is meant to demonstrate 
        // its internal workings, and writing a log is a good way to do so.
        this.pureComputedLog(this.pureComputedLog.peek() + value + '; <br />');
        return value;
    }, this);
    
    
    this.step = ko.observable(0);
    this.next = function () {
        this.step(this.step() === 2 ? 0 : this.step()+1);
    };
};
ko.applyBindings(new AppData());
<!--ko if: step() == 0-->
    <p>First name: <input data-bind="textInput: firstName" /></p>
<!--/ko-->
<!--ko if: step() == 1-->
    <p>Last name: <input data-bind="textInput: lastName" /></p>
<!--/ko-->
<!--ko if: step() == 2-->
    <div>Prefix: <select data-bind="value: prefix, options: ['Mr.', 'Ms.','Mrs.','Dr.']"></select></div>
    <h5>Hello from Computed, <span data-bind="text: fullName"> </span>!</h5>
    <h5>Hello from Pure Computed , <span data-bind="text: pureFullName"> </span>!</h5>
<!--/ko-->
<p><button type="button" data-bind="click: next">Next</button></p>
<div class="logblock">
<h3>Computed Log</h3>
<pre class="log" data-bind="html: computedLog"></pre>
</div>
<div class="logblock">
<h3>Pure Computed Log</h3>
<pre class="log" data-bind="html: pureComputedLog"></pre>
</div>
.logblock{
    display:inline-block;
    width:400px;
    min-height:150px;
}
.log{
    display:block;
    padding:5px;
    background:#f4f4f4;    
    font-size:12px;
    max-height:100px;
    overflow-y:scroll;
}

External resources loaded into this fiddle: