允許綁定到 ember 組件上的任何 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);
}

看看樣本旋轉

棄用后更新：

由於didReceiveAttrs函數的參數已被棄用，因此您需要按以下方式更改代碼：

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

見更新的旋轉 。

Answer 2

我猜在 v3.10 之后，您可以使用尖括號調用（如果需要進一步使用...attributes傳遞）， 而無需任何技巧即可完成此操作。 所以在我最簡單的情況下，它就像

<MyComponent data-aaa="bbb"/>