允許綁定到任何一個餘燼組件上的data- *屬性

Question

我正在設計一個庫，我希望允許用戶提供他們可能喜歡的任何data屬性。

{{my-component data-type='hello' data-name='world'}}

我不知道提前，他們可能要綁定到data屬性，因此不能將它們添加到attributeBindings陣列。

是否有解決方法？

Answer 1

使用didReceiveAtts鉤您的組件：

didReceiveAttrs(params){ 
    let newAttrs = params.newAttrs; 
    let attributeBindings = Ember.A(); 
    Object.keys(newAttrs).forEach((attr)=>{ 
    if(attr.indexOf('data-')>= 0){ 
     attributeBindings.pushObject(attr); 
    } 
    }); 
    this.set('attributeBindings', attributeBindings); 
} 

的外觀，Sample twiddle

更新，折舊後：

由於didReceiveAttrs函數的參數已被棄用，你需要改變代碼如下：

didReceiveAttrs(){ 
    let attributeBindings = Ember.A(); 
    Object.keys(this).forEach((attr)=>{ 
    if(attr.indexOf('data-')>= 0){ 
     attributeBindings.pushObject(attr); 
    } 
    }); 
    this.set('attributeBindings', attributeBindings); 
} 

請參閱updated twiddle。