What is correct syntax for Knockout.js css binding?

Question

I need to use few binding properties in the same element and my syntax look fine for me, but VS said that ":" and "}" expected. What is wrong with my markup?

<div class="list-group" data-bind="foreach: histories, css: { bg-danger: $data.IsRead() == false}" id="histories">

Jeroen · Accepted Answer · 2014-07-12 16:13:18Z

3

The dash in your class requires you to use quotes, e.g.:

css: { 'bg-danger': $data.IsRead() == false}

See this fiddle.

answered Jul 12, 2014 at 16:13

Jeroen

64.4k47 gold badges231 silver badges372 bronze badges

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

Comments

Jeff Mercado · Accepted Answer · 2014-07-12 16:13:23Z

2

You are essentially defining an object in your binding. It's as if you have written in regular javascript:

var css = {
    bg-danger: $data.IsRead() == false
}

Now you should know that hyphens are not legal in the name of an object literal, at least not written out like that. You have to quote it.

Change your binding to:

<div class="list-group" id="histories"
     data-bind="foreach: histories,
                css: { 'bg-danger': $data.IsRead() == false }">

p.s.,

$data.IsRead() == false

is better written out as

!$data.IsRead()

answered Jul 12, 2014 at 16:13

Jeff Mercado

136k34 gold badges268 silver badges282 bronze badges

Collectives™ on Stack Overflow

What is correct syntax for Knockout.js css binding?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related