Question

I upload my code to jsFiddle, you can test it there.

http://jsfiddle.net/2RPsw/1/

here’s the problem, instead getting a fulln name, it shows the source code of the function. If I use ko.computed, it will work. what I did below should also be fine. Can someone please explain to me why its showing the source code, not the value.

            <p>First name: <input data-bind="value: firstName" /></p>
            <p>Last name: <input data-bind="value: lastName" /></p>
            <p>Full name: <span data-bind="text: fullName"></span></p>?

KO code:

function AppViewModel() {

    self = this;

    self.firstName = ko.observable("Bert");
    self.lastName = ko.observable("Bertington");
    self.fullName = function(){
        return  self.firstName() + " " + self.lastName();

    };
}

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

UPDATE:

To answer TCM’s question. why I dont want to use ko.computed. not that I dont want to use it, simply because I am confused and not sure when to use it. for example

following code is from knockout first tutorial. its not using ko.computegd, but it works.

http://learn.knockoutjs.com/#/?tutorial=intro

self.capName = function(){
    var curVal = self.lastName();
    self.lastName(curVal.toUpperCase());
};

Answer 1

You should be using ko.computed:

 self.fullName = ko.computed(function(){
        return  self.firstName() + " " + self.lastName();

 },this);

and that will make sure whenever your value of firstName or lastName changed the changes will be reflected in your ko.computed function and you don’t have to manually update the span’s value.

For further explanation, you can read this:

http://knockoutjs.com/documentation/computedObservables.html

More or less the same example is given on this link.

If you don’t want to use ko.computed, see this link: http://jsfiddle.net/2RPsw/10/