How to append bind-attr class to initial one in Ember?

Tags: css,html5,ember.js,binding,attr

Problem :

How to append dynamic CSS class to initial static one using {{bind-attr}}?

When there is a static initial class, dynamic one is not added on page load. When I change variable during application run class binding works normally.

Here is a JSFiddle example.

Solution :

You need to use the following syntax:

<p {{bind-attr class=':bold isRed:red'}}>

See the Ember.js docs here, specifically where it says:

Bound class names and static class names cannot be combined.

Working example here

    CSS Howto..

    How can I apply a vertical scrollbar to a div with a percentage height?

    How to CSS select each first div without class after div with class?

    CSS, HTML issue. How would I get the main body of the document to be a certain way down from the top?

    How to get same effect as jQuery's slideToggle using CSS 3 transitions?

    ExtJS - How to customize buttons?

    How to set height of a div element to same as another div

    Use anchors and :target for navigation. How to show first layer by default

    How to create javascript or css fadeInDown on mouseover?

    How can I align the left edge of HTML form elements using CSS?

    How to place divs three in a row with css and html

    How to change the current link color in navigation bar

    How can I create two columns of text next to each other using CSS?

    How to create a mobile navigation toggle using pure CSS?

    How can I make a CSS Wrapper adjust height automatically?

    jQuery beginner: how to add css transition when using toggleClass(“open”)?

    How to minify and combine commented out css files

    How to crop SVG file within HTML/CSS

    how to change negative sign position css

    How can i integrate php to html table

    How to handle PNG image loading time in html, css

    How do I get my webpage to look like this?

    How to change img margin inside a table using css hover

    How do I prevent fadeIn/Out blinking with expanding/collapsing header?

    How do I get my menu to drop down? CSS & HTML

    How to add CSS Hack specifically for IE10?

    Sencha Touch 2 date picker component & css: how to display hidden column names?

    How to show inline help using simple css and jquery

    how to stop CSS hyphenation, no dash between words

    How Can I Make An Odd Shaped Icon into a “Circle”?

    How (and why) to use display: table-cell (CSS)