【问题标题】:multi attribute binding in ember componentember 组件中的多属性绑定
【发布时间】:2013-09-23 11:57:17
【问题描述】:

在我问我的问题之前,我遇到了属性绑定问题并解决了这个link 的问题,知道我的组件是这样的:

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

好的,我想添加另一个与currentItem.isMeasure 绑定的属性。在此之前,我使用currentItem.isMeasure 在此组件中进行类绑定并正常工作,但是当我使用此代码时:

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

和 ember 像这样创建一个 li 元素:

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

data-ismeausre 必须是 true 或 false 而不是 data-isMeasure 。所以我用另一种方式:

 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(),

但返回的值仍然

但是当我在 console.log 中返回 true 但在元素中插入 data-isMeasure 而不是 true

【问题讨论】:

  • 对于您的第二种方法,您应该指定一个依赖键。试试property('currentItem.isMeasure')。但我不知道仅此一项是否有帮助。

标签: ember.js ember-data


【解决方案1】:

我用一个技巧解决了我的问题。在我的应用程序中,currentItem.isMeasuretruetrue 是布尔值,因此 ember 在元素中插入属性名称。所以我试试这段代码:

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'),

现在一切正常,我的元素是:

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

并且知道我可以考虑用更好的代码来清理这个技巧。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-06-26
    • 1970-01-01
    • 2015-06-05
    • 2017-08-20
    相关资源
    最近更新 更多