Knockoutjs css, function call

Question

I am going through the tutorial from the official website:

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:

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 ?
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

Artem Vyshniakov · Accepted Answer · 2012-10-04 13:17:19Z

2

Here are answers:

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'.
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.

answered Oct 4, 2012 at 13:17

Artem Vyshniakov

16.5k3 gold badges46 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dtjmsy Over a year ago

Hi Artem, thanks a lot, I understand better why the function is called with no argument, About the syntax, why the css: is called with the () of the end of chosenFolderId() ?, and click: without ?

Artem Vyshniakov Over a year ago

Because you should use brackets when you have an expression in binding (i.e. "visible: Something() > 10"), if you have just function or observable you don't need to put brackets. This article help you to understand basic things: knockmeout.net/2011/06/…

Collectives™ on Stack Overflow

Knockoutjs css, function call

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related