Data bind in knockout is not working for multiple attributes

Question

I have a following div tag with data binding

It gives following error

Bindings value: visible:showBannerMessage , style:{backgroundColor: #ffeea8;height: 40px} Message: Invalid or unexpected token

Where am i commiting mistake? Thanks

Answer 1

The value you pass to the style binding should be a valid javascript object, not a css string. You've made two mistakes:

• property: value pairs should be delimited by a ,, not a ;
• string values should be enclosed by quote marks. Both 40px and #ffeea8 should be wrapped in ''.

I.e., the correct binding is:

/*              comma -------------v                */
style: { backgroundColor: '#ffeea8', height: '40px'  }
/*            quotes -----^-------^----------^----^ */

Here's a reproduction of your faulty view, showing the error you've described, and a correct one that includes fixes to these two changes:

// Wrong view
try {
  ko.applyBindings({
    showBannerMessage: true
  }, document.getElementById("wrong"));
} catch(err) {
  console.log("error:", err.message);
}

// Right view:
ko.applyBindings({
  showBannerMessage: true
}, document.getElementById("right"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<!-- with errors -->
<div id="wrong" data-bind="visible:showBannerMessage, style:{backgroundColor: #ffeea8; height: 40px}">Hello world</div>

<!-- without errors -->
<div id="right" data-bind="visible:showBannerMessage, style:{ backgroundColor: '#ffeea8', height: '40px' }">Hello world</div>