将属性添加到Emberjs组件

时间:2013-09-23 07:11:17

标签: ember.js

我有这样的组件,并希望在其上设置一些属性:

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

我将这个组件称为:

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

item有一个id属性item.id现在我想将这个id设置为component的data-id来创建一个这样的元素:

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

3 个答案:

答案 0 :(得分:5)

你的方法确实有效吗?我怀疑它不应该那样工作,而应该是:

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

一点额外的评论:查看我的博客文章,了解如何正确执行jquery逻辑:http://mavilein.github.io/javascript/2013/08/01/Ember-JS-After-Render-Event/

答案 1 :(得分:3)

实际上,您可以在不引入额外计算属性的情况下执行此操作。

attributeBindings:['currentItem.id:data-id']

答案 2 :(得分:2)

搜索并尝试某种方式后,我发现了。我用它来解决我的问题:

attributeBindings:['getId:data-id'],
getId:function(){return this.get('currentItem.id')}.property(),