Динамически изменяя цвет линии в нокауте JS

Question

У меня есть класс CSS, который рисует линию, как это:

.divider { 
    border-top: 1px solid; 
    border-top-color: #000; 
} 

Теперь каждый раз, когда я рисую этот делитель, я хочу, чтобы динамически изменять цвет. Я использую привязку стиля к элементу div следующим образом:

<div class="divider" data-bind="style: { border-top-color: $data.color }"></div> 

Но как-то цвет не меняется. И я получаю эту ошибку:

knockout.js?body=1:2937 Uncaught SyntaxError: Unable to parse bindings. 
Bindings value: style: { border-top-color: $data.color } 
Message: Unexpected token - 

Каков правильный способ сделать это?

Answer 1

Вы не можете использовать стили с дефисом, потому что это не действительный идентификатор JavaScript. Knockout documentation, раздел Примечание: Применение стилей, чьи имена не являются юридическим JavaScript имен переменных описывает то, что вам нужно сделать, вместо того, чтобы:

If you want to apply a font-weight or text-decoration style, or any other style whose name isn’t a legal JavaScript identifier (e.g., because it contains a hyphen), you must use the JavaScript name for that style. For example,

• Don’t write { font-weight: someValue }; do write { fontWeight: someValue }
• Don’t write { text-decoration: someValue }; do write { textDecoration: someValue }

See also: a longer list of style names and their JavaScript equivalents

Так что в вашем случае вместо

<div class="divider" data-bind="style: { border-top-color: $data.color }"></div> 

вы должны использовать

<div class="divider" data-bind="style: { borderTopColor: $data.color }"></div> 

Answer 2

Как @kasperoo упоминает, используйте одинарные кавычки вокруг .

<div class="divider" data-bind="style: { 'border-top-color': $data.color }"></div>