Adding Dynamic Css with EmberJS

Question

I created this view

{{#view Q.FlashView id="flash-view"}}
<div class="row">
  <div class="small-11 small-centered columns">
    <div id="message" {{bindAttr class=":alert-box :radius"}} data-alert>
      {{view.content.message}}
      <a href="#" class="close">&times;</a>
    </div>
  </div>
</div>
{{/view}}

with this definition

Q.FlashMessage = Ember.Object.extend({
  type: "notice",
  message: null,
  isNotice: (function() {
    return this.get("type") === "notice";
  }).property("type").cacheable(),
  isWarning: (function() {
    return this.get("type") === "warning";
  }).property("type").cacheable(),
  isError: (function() {
    return this.get("type") === "error";
  }).property("type").cacheable(),
  isSuccess: (function() {
    return this.get("type") === "success";
  }).property("type").cacheable()
});

Q.FlashView = Ember.View.extend({
  contentBinding: "Q.FlashController.content",
  classNameBindings: ["isNotice: secondary", "isWarning: alert", "isError: alert", "isSuccess: success"],
  isNoticeBinding: "content.isNotice",
  isWarningBinding: "content.isWarning",
  isErrorBinding: "content.isError",
  isSuccessBinding: "content.isSuccess",

What I am trying to do is to make the view display the following css class depending on the type if notice for example to have class="alert-box radius notice".

I can't figure out how is this done, as it seems this classNameBindings is not working out with static content.

I already asked this question to the original author in which I took the code from, coderberry.me/blog/2013/06/20/using-flash-messages-with-emberjs/

you can see the original code there.

Thanks in advance

Do you want to add dynamic classes either to the Q.FlashView (id="flash-view") or to the message div (id="message") ??? — selvagsz
– selvagsz, Commented Jul 26, 2013 at 4:34
To the div id="message", I want to add dynamic class with these static classes — Mohammad Abu Musa
– Mohammad Abu Musa, Commented Jul 26, 2013 at 8:41

selvagsz · Accepted Answer · 2013-07-26 08:48:03Z

1

You can add a class based on a property

    <div id="message" {{bindAttr class=":alert-box :radius view.isNotice:notice view.isWarning:warning"}} >
     {{view.content.message}}
      <a href="#" class="close">&times;</a>
    </div>

answered Jul 26, 2013 at 8:48

selvagsz

3,8721 gold badge27 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

chrmod · Accepted Answer · 2013-07-26 07:24:52Z

0

Don't you have a syntax error on classNamesBindings definition?

classNameBindings: ["isNotice: secondary", "isWarning: alert", "isError: alert", "isSuccess: success"],

it should look like this (without spaces after the colon):

  classNameBindings: ["isNotice:secondary", "isWarning:alert", "isError:alert", "isSuccess:success"],

and the classNameBindings should work with computed properties. If no you can set up observer to change static property as a walkaround.

answered Jul 26, 2013 at 7:24

chrmod

1,45512 silver badges19 bronze badges

1 Comment

Mohammad Abu Musa Over a year ago

Thanks for the help, apparently my question was little bit confusing the solution of Selva-G down there is correct

Collectives™ on Stack Overflow

Adding Dynamic Css with EmberJS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related