Error while using computed and function together

[Ashish Chinchulkar]

Hi ,

Following is my VIewModel code :

function AppViewModel() {

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

    this.capitalizeLastName=function(){
    var currVal=this.firstName();
    this.firstName(currVal.toUpperCase());
    };
    
    this.getFullName=function(){
    this.fullName(this.lastName()+ " "+this.firstName());
    };
}

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

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Following is View code:

<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: <strong data-bind="text: fullName"></strong></p>

<button data-bind="click: capitalizeLastName">Go caps FirstName</button>
<button data-bind="click: getFullName">Go Full Name</button>

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

While I click on "Go Full Name" Button I am getting following exception in console

Uncaught Error: Cannot write a value to a ko.computed unless you specify a 'write' option. If you wish to read the current value, don't pass any parameters.

    at AppViewModel.k [as fullName] (VM302 knockout-3.0.0.js:38)

    at AppViewModel.getFullName (data:text/html;charset=utf-8,%0A%3C!DOCTYPE%20html%3E%0A%3Chead%3E%0A%20%20%20%20%3Cbase%20href%3D%22http%3A%2F%2Flearn.knockoutjs.com%2F%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.7.1%2Fjquery.min.js%22%3E%3C%2Fscript%3E%0A%20%20%20%20%3Cscript%20type%3D'text%2Fjavascript'%20src%3D'%2FScripts%2FLib%2Fknockout-3.0.0.js'%3E%3C%2Fscript%3E%0A%20%20%20%20%3Clink%20rel%3D%22Stylesheet%22%20href%3D%22%2FContent%2FApp%2Fcoderunner.css%22%20%2F%3E%0A%20%20%20%20%0A%3C%2Fhead%3E%0A%3Chtml%3E%0A%20%20%20%20%3Cbody%20class%3D%22codeRunner%22%3E%0A%20%20%20%20%20%20%20%20%3C!--%20This%20is%20a%20*view*%20-%20HTML%20markup%20that%20defines%20the%20appearance%20of%20your%20UI%20--%3E%0A%0A%3Cp%3EFirst%20name%3A%20%3Cstrong%20data-bind%3D%22text%3A%20firstName%22%3E%3C%2Fstrong%3E%3C%2Fp%3E%0A%3Cp%3ELast%20name%3A%20%3Cstrong%20data-bind%3D%22text%3A%20lastName%22%3E%3C%2Fstrong%3E%3C%2Fp%3E%0A%0A%3Cp%3EFirst%20name%3A%20%3Cinput%20data-bind%3D%22value%3A%20firstName%22%20%2F%3E%3C%2Fp%3E%0A%3Cp%3ELast%20name%3A%20%3Cinput%20data-bind%3D%22value%3A%20lastName%22%20%2F%3E%3C%2Fp%3E%0A%0A%3Cp%3EFull%20name%3A%20%3Cstrong%20data-bind%3D%22text%3A%20fullName%22%3E%3C%2Fstrong%3E%3C%2Fp%3E%0A%0A%3Cbutton%20data-bind%3D%22click%3A%20capitalizeLastName%22%3EGo%20caps%20FirstName%3C%2Fbutton%3E%0A%3Cbutton%20data-bind%3D%22click%3A%20getFullName%22%3EGo%20Full%20Name%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%3Cscript%20type%3D'text%2Fjavascript'%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20(function%20()%20%7B%20%2F%2F%20Wrap%20in%20function%20to%20prevent%20accidental%20globals%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(/location.protocol%20!%3D%20%22data%3A%22)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(window).bind('hashchange'%2C%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20window.parent.handleChildIframeUrlChange(location.hash)%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20This%20is%20a%20simple%20*viewmodel*%20-%20JavaScript%20that%20defines%20the%20data%20and%20behavior%20of%20your%20UI%0Afunction%20AppViewModel()%20%7B%0A%20%20%20%20this.firstName%20%3D%20ko.observable(%22Bert%22)%3B%0A%20%20%20%20this.lastName%20%3D%20ko.observable(%22Bertington%22)%3B%0A%20%20%20this.fullName%20%3D%20ko.observable()%3B%0A%20%20%20%20this.fullName%20%3D%20ko.computed(function()%20%7B%0A%20%20%20%20return%20this.firstName()%20%2B%20%22%20%22%20%2B%20this.lastName()%3B%20%20%20%20%0A%20%20%20%20%7D%2C%20this)%3B%0A%0A%20%20%20%20this.capitalizeLastName%3Dfunction()%7B%0A%20%20%20%20var%20currVal%3Dthis.firstName()%3B%0A%20%20%20%20this.firstName(currVal.toUpperCase())%3B%0A%20%20%20%20%7D%3B%0A%20%20%20%20%0A%20%20%20%20this.getFullName%3Dfunction()%7B%0A%20%20%20%20this.fullName(this.lastName()%2B%20%22%20%22%2Bthis.firstName())%3B%0A%20%20%20%20%7D%3B%0A%7D%0A%0A%2F%2F%20Activates%20knockout.js%0Ako.applyBindings(new%20AppViewModel())%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)()%3B%0A%20%20%20%20%20%20%20%20%3C%2Fscript%3E%0A%20%20%20%20%3C%2Fbody%3E%0A%3C%2Fhtml%3E:47:10)

    at HTMLButtonElement.<anonymous> (VM302 knockout-3.0.0.js:65)

    at HTMLButtonElement.dispatch (VM300 jquery.min.js:3)

    at HTMLButtonElement.i (VM300 jquery.min.js:3)

Why this so?

[Noirabys]

this.fullName is a computed ( you are overwriting the observable )

click to getFullName will than call this.fullName(this.lastName()+ " "+this.firstName());

you can use an other internaly names observable to store it and/or specify an write option for the computable

[ChucK Norris]

Hello you declare FullName 2 time ( = observable and = ko.computed ) this is useless, its like if you doing var a = 1  then var a = 2 ^^ 

here the doc for writable computed. 

https://knockoutjs.com/documentation/computed-writable.html

[Hema sedhom]

don't write   "this.fullName = ko.observable(); "