CODEWITHSUNDEEP
cssviewember.js
user1338121
user1338121

Reputation: 805

Add, remove css classes while Ember view getting rendered

How to add, remove and change css classes for an ember element based on the value from the contentBinding while doing ember each?

Doing something like below in didInsertElement, but by the time have added the css classes, based on content value from controller, view element is attached to the view and hence css doesn't get applied.

Is there any other way that we could perform this while view element is getting rendered?

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

}

Upvotes: 1

Views: 1762

Answers (1)

pangratz
pangratz

Reputation: 16163

You could use a Ember.CollectionView and specify your classes which depend on the content in classNameBindings. See API documentation, section HTML class Attribute.

See an example here 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();​

Upvotes: 1

Related Questions