javascript - Ember 组件 bind-attr className 没有改变

Question

我正在尝试在这里做一些非常简单的事情，但到目前为止我无法让它工作。可能是我在做傻事。

单击圆圈可打开和关闭帖子。您可以看到警报消息正确出现，正在更新参数，但是我无法更改类名。

这是 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>

应用程序.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

所以基本上你应该在组件上使用类绑定(bind)。

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