CODEWITHSUNDEEP
javascriptember.jshandlebars.js
user2067956
user2067956

Reputation:

Ember component bind-attr className doesn't change

I'm trying to do something very simple here and I couldn't make it work so far. It's probably me doing silly things.

You click in the circle to turn on and off a post. You can see that the alert message is coming right, the parameter is being updated, however I can't make the className change.

Here's the JS Bin: http://jsbin.com/tusimozo/1/edit

<script type="text/x-handlebars" data-template-name="index">
  {{ group-list posts=model }}
</script>

<script type="text/x-handlebars" id="components/group-list">
  <div class="row">
    <table width="100%">
      <thead>
        <tr>
          <th width="90">Status</th>
          <th align="left">Categories</th>
        </tr>
      </thead>
      <tbody>
        {{# each item in posts}}
          {{list-item published=item.published title=item.title pubDate=item.pub_date}}
        {{/each}}
      </tbody>
    </table>
  </div>
</script>

<script type="text/x-handlebars" id="components/list-item">
  <tr>
    <td>
      <a href="#" {{bind-attr class=":post-status published:on:off"}} {{action "publish"}}></a>
    </td>
    <td align="left">{{title}}</td>
  </tr>
</script>

app.js

App = Ember.Application.create();

posts = [{
  title: "Items",
  published: true
}, {
  title: "Boards",
  published: false
}];

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return posts; 
  }
});

App.ListItemComponent = Ember.Component.extend({
  actions: {
    publish: function() {
      var publishStatus = this.get('published') ? false : true;
      this.set('published', publishStatus);
      alert(this.get('published') ? 'publish' : 'unpublish');
    }
  }
});

What am I missing here?

Cheers!

Upvotes: 3

Views: 1558

Answers (2)

Always Rock
Always Rock

Reputation: 1

You can add more than one class by using classNames as well.

classNames: ['class-name-1'], 
classNameBindings: ['isSomethingTrue:class-name-2:class-name-3']

Further references here: https://guides.emberjs.com/v1.10.0/components/customizing-a-components-element/

Upvotes: 0

Richard A
Richard A

Reputation: 2100

So basically you should use classbindings on the component.

App.ListItemComponent = Ember.Component.extend({
    tagName:'tr',
    classNameBindings: ['isPublished:on:off'],
    isPublished: function() {
        return this.get('published');
    }.property('published'),
    actions: {
         publish: function() {
            this.toggleProperty('published');
         }
    }
});

JSBIN:

http://jsbin.com/mixeniheze/1/edit

Upvotes: 2

Related Questions