Ember組件bind-attr className不變

我正在嘗試在此處做一些非常簡單的事情，但目前爲止我無法使其工作。這可能是我做愚蠢的事情。Ember組件bind-attr className不變

您點擊圈子打開和關閉帖子。你可以看到警報消息來了，參數正在更新，但是我不能讓className改變。

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

缺少什麼我在這裏？

乾杯！

來源

2014-02-26 Henrique Alves

所以基本上你應該在組件上使用classbindings。

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

來源

2014-02-26 23:18:50

哦男人就是這樣！我之前嘗試過，但使用了錯誤的tagName。非常感謝！ –

只是提醒'Ember.Object'上的'toggleProperty'方法：'this.toggleProperty（'published'）' – Huafu

您可以通過使用classNames以及添加多個班級。

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

來源

2017-06-14 12:35:45

Ember組件bind-attr className不變

回答

相關問題