成员组件绑定-attr className不会更改

Question

我试图在这里做一些非常简单的事情，但到目前为止，我无法做到这一点。可能是我在做傻事。

你点击圆圈打开或关闭一个帖子。您可以看到警报消息正在正常运行，参数正在更新，但是我无法更改className。

这是JS：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');
    }
  }
});

我在这里错过了什么？

干杯!

Answer 1

因此，基本上您应该在组件上使用类绑定。

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

Answer 2

您也可以使用classNames添加多个类。

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

在此进一步参考：https://guides.emberjs.com/v1.10.0/components/customizing-a-components-element/