...">
Geek Answers Handbook

The "advanced" cock knockout binding operator does not behave exactly as expected

I have a pretty long knockout css binding applied to an <li> element.

According to the correct scenario in my view model, the list of classes may look like this:

<li class="workItem task notRead">
</li>

where "workItem" is just a static string, "task" is returned from the "workItemTypeName" computed in my view model, and "notRead" is switched based on the properties in my view model.

In an ideal world that exists in my head, I could combine these three class assignment statements (which work individually):

<li class="workItem">
</li>

<li data-bind="css: workItemTypeName">
</li>

<li data-bind="css: { 'notRead': isNotRead }">
</li>

into something like this:

<li data-bind="css: { 'workItem', workItemTypeName, 'notRead': isNotRead }">
</li>

After some untying, I managed to get to this (which works):

<li data-bind="attr: { 'class': workItemTypeName + ' ' + ' workItem' }, css: {
'notRead': isNotRead }">
</li>

... - , , css? ?

+4
2

@ExplosionPills , , .

CSS / (!) css. .

self.workItemCss = ko.computed(function () {
    var classes = {};
    classes.workItem = true;
    classes.notRead = self.isNotRead;
    classes[ko.unwrap(self.workItemTypeName)] = true;
    return classes;
});

http://jsfiddle.net/SHmc8/ (: http://jsfiddle.net/SHmc8/1/)

, class css:

<li class="any fixed classes" data-bind="css: workItemCss">

classes.workItem = true; .

+4

, , ViewModel, . - ​​( ).

self.workItemCss = ko.computed(function () {
    return "workItem" + (self.isNotRead() ? " notRead" : "")
        + " " + self.workItemTypeName();
});

<!-- html -->
<li data-bind="css: workItemCss">
+4

More articles:


All Articles