Question

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

您点击圈子即可打开和关闭帖子。您可以看到警报消息正确，参数正在更新，但是我无法更改className。

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

我在这里缺少什么？

干杯！

Answer 1

所以基本上你应该在组件上使用classbinding。

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/

Ember组件bind-attr className不会更改

2 个答案: