KnockoutJS single page application tutorial step one ambiguity

Question

I'm following KnocoutJS interactive tutorial and have one ambiguity. The tutorial is located here: http://learn.knockoutjs.com/#/?tutorial=webmail I'm on step one and cannot understand the following parts:

self.chosenFolderId = ko.observable();

This means that chosenFolderId property will be observable?

<li data-bind="text: $data, 
               css: { selected: $data == $root.chosenFolderId() },
               click: $root.goToFolder"></li>

I mean this specific expression:

click: $root.goToFolder

What pass this expression to goToFolder method? It seems that pass to function selected string from array but on first view it pass li object.

I would be very grateful for any ideas and recommendations.

Best regards.

Answer 1

The knockout docs say the click binding will pass the data-context to the click handler function goToFolder.

In this case the data context is a string, the folder name because the click binding is inside a foreach binding.

This binding click: $root.goToFolder is basically shorthand for this:

click: function() { $root.goToFolder($data); }