Question

I am going through the tutorial from the official website:

Knockout single page application lesson

this is the view:

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

and the script:

function WebmailViewModel() {
    // Data
    var self = this;
    self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];
    self.chosenFolderId = ko.observable();

    // Behaviours    
    self.goToFolder = function(folder) { self.chosenFolderId(folder); };    
};

ko.applyBindings(new WebmailViewModel());

I dont’ t understand 2 things:

1. the ‘click:’ event is calling the javascript function goToFolder, however, with no argument, how does it know which folder is clicked to set the chosenFolderId ?

2. Correct me if I am wrong, the line css: { selected: $data == $root.chosenFolderId() } means if the current selected object $data is equal to chosenFolderId(), therefore the css with the name selected is enable ?

Cheers all

Answer 1

Here are answers:

1. By default knockout passes current context to the function that is called. In your case this is $data object which contains one of the following strings ‘Inbox’, ‘Archive’, ‘Sent’, ‘Spam’.

2. Yes, you are right. This means that selected css class will be applied to the <li> element where $data is equal to chosenFolderId property of view model.