adding attributes to Emberjs component

Question

i have component like this and want to set some attributes on it:

OlapApp.ItemRowsComponent = Ember.Component.extend({
tagName: 'li',
classNameBindings: ['currentItem.isMeasure:d_measure:d_dimension'],
didInsertElement: function() {
    this.$().draggable({

    });
},
actions: {
    removeItem: function(item) {
        item.deleteRecord();
        item.save();
    },
    didClick: function(item) {
        if (item.get('isMeasure')) {
            item.deleteRecord();
            item.save();
        }
    }
}
});

and i call this component like this :

{{#each item in getRowItem}}
 {{item-rows currentItem=item}}
{{/each}}

item have a id property item.id now i want to set this id to data-id of component to create an element like this :

<li data-id='id of item'>Some text</li>

mavilein mavilein · Accepted Answer · 2013-09-23T08:04:50

Your approach actually works? I would suspect that it shouldn't work that way and should rather be:

OlapApp.ItemRowsComponent = Ember.Component.extend({
  attributeBindings:["data-id"],
  "data-id" : Ember.computed.oneWay("currentItem.id")
  // and the rest of your code ...
});

One little extra remark: Checkout my blog post on how to perform jquery logic correctly: http://mavilein.github.io/javascript/2013/08/01/Ember-JS-After-Render-Event/

adding attributes to Emberjs component

3 Answers