允许绑定到ember组件上的任何data- *属性

Posted 2021-05-06

我正在设计一个库，我希望允许用户提供他们可能喜欢的任何data属性。

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

我不知道他们可能想要绑定哪个data属性，所以无法将它们添加到attributeBindings数组中。

这有解决方法吗？

答案

使用组件的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。