viewModel as var vs. function()

[Lou Gallo]

I've been having difficulty getting ko.compute to work in my app. I
did some research in the ko documentation and noticed that most of the
examples use a function to declare the viewModel, like this:

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

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

I've written several successful pages (I think) by declaring my
viewModel as a var:

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


What's the difference? Is this why my ko.compute isn't working? Is it
something I should go back and fix?

Thanks,

Lou

[xec]

I think you're just missing something in your computed function, try
this;

appViewModel.fullName = ko.computed(function() {

return this.firstName() + " " + this.lastName();

}, appViewModel);

[John Rayner]

Have a read of the "Managing this" section on http://knockoutjs.com/documentation/computedObservables.html.  Basically in your computation function for fullName, "this" is not pointing at your viewmodel, as odd as that may seem.

Cheers,

John

[Chris Dew]

re: fn vs var

I think the difference is that the function can be a little more
flexible, in that it can allow you to refer to properties of the
object during construction.

e.g.

var foo = { bar: 'hello',
baz: this.bar + ' world'
};

gives foo.baz === 'undefined world'

whereas:

var foo = new (function() {
this.bar = 'hello';
this.baz = this.bar + ' world';
})();

gives foo.baz === 'hello world'


Regards,

Chris.

On Feb 6, 12:59 pm, John Rayner <any...@gmail.com> wrote:
> Have a read of the "Managing this" section onhttp://knockoutjs.com/documentation/computedObservables.html.  Basically in

[Lou Gallo]

On Feb 6, 7:57 am, xec <eri...@yahoo.com> wrote:
> I think you're just missing something in your computed function, try
> this;
>
> appViewModel.fullName = ko.computed(function() {
>         return this.firstName() + " " + this.lastName();
>     }, appViewModel);
>

Yes, thanks xec, that made it work.

[Lou Gallo]

>>the function can be a little more
>>flexible, in that it can allow you to refer to properties of the
>>object during construction.

Yes, I've noticed that and it is awkward to have to declare the
viewModel and then have to append functions to it using
viewModel.fullName = ... because the viewModel variable isn't
completed by the compiler by the time it's being used in a function
within the viewModel (or at least this is how I explain it to
myself).

I'll have to contemplate why functions behave differently...

Your answer helps me get a better undersanding of JavaScript...

Thanks, Chris, for taking the time.

[Lou Gallo]

OK thanks John. I'll read it.

Would you say there's a right and a wrong way here or just a flow/
convenience to declare viewModel as a function rather than a var?

Thanks again

[John Rayner]

It's about convenience and style IMO.  I like the var syntax personally but it makes it harder to use object-level variables (as you noticed!) since JavaScript doesn't consider the "this" pointer as part of the closure of a function.

Cheers,

John