multi attribute binding in ember component

Question

before i ask my question i have problem with with attribute binding and solve the problem with this link know my component is like this :

OlapApp.ItemRowsComponent = Ember.Component.extend({
tagName: 'li',
classNameBindings: ['currentItem.isMeasure:d_measure:d_dimension'],
attributeBindings:['data-id'],
'data-id':Ember.computed.oneWay('currentItem.id'),
actions: {
    removeItem: function(item) {
        item.deleteRecord();
        item.save();
    },
    didClick: function(item) {
        if (item.get('isMeasure')) {
            item.deleteRecord();
            item.save();
        }
    }
}
});

ok know i want to add another attribute to this that bind with currentItem.isMeasure.before this i use currentItem.isMeasure for class binding in this component and work correctly but when im using this code :

attributeBindings:['data-id','data-isMeasure'],
'data-id':Ember.computed.oneWay('currentItem.id'),
'data-isMeasure':Ember.computed.oneWay('currentItem.isMeasure'),

and ember create a li element like this :

<li id="ember745" class="ember-view d_measure" data-id="03lp9" data-ismeasure="data-isMeasure">

data-ismeausre must be true of false not data-isMeasure . so im using another way:

 attributeBindings:['data-id','io:data-isMeasure'],
'data-id':Ember.computed.oneWay('currentItem.id'),
io:function(){
    console.log(this.get('currentItem').get('isMeasure')); //its return true
    return this.get('currentItem').get('isMeasure');
}.property(),

but the returned value still

but when im console.log it return true but insert data-isMeasure instead of true in element.

For your 2nd approach you should specify a dependent key. Try property('currentItem.isMeasure'). But i don't know if this alone helps. — mavilein

MBehtemam MBehtemam · Accepted Answer · 2013-09-24T07:25:03

i solved my problem with a trick . in my application currentItem.isMeasure is true and the true is boolean so ember insert the name of attribute in element. so i try this code :

attributeBindings:['data-id','io:data-isMeasure'],
'data-id':Ember.computed.oneWay('currentItem.id'),
io:function(){
    var val = this.get('currentItem.isMeasure');
    if(val==true)return "true";
    return "false";
}.property('currentItem.isMeasure'),

now every thing work correctly and my element is :

<li id="ember745" class="ember-view d_measure" data-id="acafd" data-ismeasure="true">

and know i can think about cleaning of this trick with better code.

multi attribute binding in ember component

1 Answers