在Ember视图渲染时添加,删除css类

时间:2012-05-25 17:45:16

标签: css view ember.js

如何在执行ember的同时基于contentBinding中的值添加,删除和更改ember元素的css类?

在didInsertElement中执行类似下面的操作,但是当时添加了css类,基于控制器的内容值,视图元素附加到视图,因此css不会被应用。

在渲染视图元素时,还有其他方法可以执行此操作吗?

didInsertElement: function() {
      this._super();
    var personStr= this.get("content").person;
       if(personStr==1){
            this.$("img").addClass("add-person");
            this.$("img").removeClass("view-person");
            this.$("img").removeClass("edit-person");
        }

}

1 个答案:

答案 0 :(得分:1)

您可以使用Ember.CollectionView并指定依赖于content中的classNameBindings的类。请参阅API documentation HTML类属性部分。

在此处查看示例http://jsfiddle.net/pangratz666/b4xGP/

Ember.CollectionView.create({
    content: [{name: 'Brunö'}, {name: 'Alfred'}, {name: 'Hansi'}],

    itemViewClass: Ember.View.extend({
        templateName: 'item',
        classNameBindings: 'beginsWithA'.w(),

        beginsWithA: function() {
            var name = this.getPath('content.name');
            if (!Ember.empty(name)) {
                return name.indexOf('A') === 0;
            }
        }.property('content.name')
    })
}).append();​