Knockout add CSS class depending on value in observableArray

Question

I have a very number/input heavy Knockout app and my HTML templates are generated from values contained within observableArrays to keep the HTML templates to a minimum.

However, some of the inputs (randomly positioned) that are generated into the HTML templates will need the class of 'total-val' adding to them.

The way I've gone about this is by creating a new is_total observable inside my tableView function which gets passed a value of true/false but this doesn't seem to be working.

I have created a simple/stripped down version of my current templating structure which can be viewed on the codepen below. The first table shows all the values inside valuesArray with no CSS observable. The second table does contain the CSS observable and as you can see; it's killed the script completely.

Any guidance will be greatly appreciated!

HTML:

<input data-bind="value: value, css: { 'total-val', is_total }">

JS:

function tableView(label, value, is_total) {
  var self = this;
  self.label = ko.observable(label);
  self.value = ko.observable(value);
  self.is_total = ko.observable(is_total);
}

function viewModel() {
  var self = this;
  self.valuesArray = ko.observableArray([]);
  self.valuesArray.push(new tableView('one', 123, false));
}

http://codepen.io/anon/pen/mqElr

Answer 1

Your using a comma in your css binding, replace it with a colon.

<table data-bind="foreach: valuesArray">
  <tr>
    <td><span data-bind="text: label"></span></td>
    <td><input data-bind="value: value, css: { 'total-val': is_total }"></td>
  </tr>
</table>

Answer 2

Another alternate

<input data-bind="value: value, style: { 'total-val', is_total }">

also it is recommended not to use hyphen so it would be better if you convert it to

<input data-bind="value: value, style: { 'totalval', is_total }">

look at documentation http://knockoutjs.com/documentation/style-binding.html

Note: Applying styles whose names aren’t legal JavaScript variable names

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 }