Geek asks and answers

Ember class link-attr component unchanged

I am trying to do something very simple here, and I could not get it to work so far. Maybe I'm doing stupid things.

You click on the circle to turn recording on and off. You can see that the alarm message is going correctly, the parameter is being updated, but I cannot change the class name.

Here's 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?

Hooray!

+3
source share
2 answers

So basically you should use classbindings for 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

+3
source

You can add multiple classes using classNames.

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

Other links here: https://guides.emberjs.com/v1.10.0/components/customizing-a-components-element/

0
source

More articles:


All Articles