using the knockout js website tutorial - how to uppercase fullName (instead of just lastName)?

Question

i'm just killing some time and getting my hands dirty with some knockout.js. I've never gone near it before, so I figured I'd take a look at what its all about.

On the official website - http://learn.knockoutjs.com, I've modified the code on step 4/5 so that instead of the button turning the lastName value into uppercase when the button is clicked, BOTH firstName and lastName are combined into variable called fullName and the view is updated to show fullName all in uppercase.

Any idea as to what I'm doing wrong here folks ? I'm simply trying to aggregate / concat the values for firstName and lastName and storing them in a var called currentVal which is assigned to value fullName in the view. When i click the button nothing really happens heh

This is my code (modified from the tutorial at step 4/5 , see if you can tell me where I might be doing something wrong here.

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
  this.firstName = ko.observable("Bert");
  this.lastName = ko.observable("Bertington");

  this.fullName = ko.computed(function() {
    return this.firstName() + " " + this.lastName();
  }, this);

  this.capitalizeLastName = function() {
    this.fullName = this.firstName() + " " + this.lastName(); //with or without this line, it doesn't update fullName to uppercase :-|
    var currentVal = this.fullName();
    this.fullName(currentVal.toUpperCase());
  };
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<p>Full Name: <input data-bind="value: fullName" /></p>
<p>Full Name: <strong data-bind="text: fullName"></strong></p>
<button data-bind="click: capitalizeLastName"> Go caps</button>

Answer 1

Hi you only need to update your firstName and lastName variables, because fullName its a computed function that return those values, like so:

function AppViewModel() {
  this.firstName = ko.observable("Bert");
  this.lastName = ko.observable("Bertington");

  this.fullName = ko.computed(function() {
    return this.firstName() + " " + this.lastName();
  }, this);

  this.capitalizeFullName = function() {
   this.lastName(this.lastName().toUpperCase());     
   this.firstName(this.firstName().toUpperCase());     
  };
}

ko.applyBindings(new AppViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<p>Full Name: <input data-bind="value: fullName" /></p>
<p>Full Name: <strong data-bind="text: fullName"></strong></p>
<button data-bind="click: capitalizeFullName"> Go caps</button>