dynamisch die Farbe einer Linie in Knockout-Wechsel js

Question

ich eine CSS-Klasse, die eine Zeile wie diese zieht:

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

jedes Mal, wenn ich diesen Teiler Nun ziehen, mag ich die Farbe dynamisch ändern. Ich verwende die Stilbindung für das div-Element wie folgt:

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

Aber irgendwie ändert sich die Farbe nicht. Und ich bekomme diesen Fehler:

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

Was ist der richtige Weg, dies zu tun?

Answer 1

Sie können keine Stile mit einem Bindestrich verwenden, da es sich nicht um einen gültigen JavaScript-Bezeichner handelt. Knockout documentation, Abschnitt Hinweis: Anwenden von Stilen, deren Namen nicht legal Variablennamen JavaScript beschreibt, was Sie stattdessen tun müssen:

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

Also in Ihrem Fall statt

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

Sie

verwenden sollten

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

Answer 2

Wie @kasperoo erwähnt, verwenden Sie einfache Anführungszeichen um .