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

50pmv0ei 于 2022-11-05 发布在其他

关注(0)|答案(2)|浏览(145)

我正在设计一个库，允许用户提供他们可能喜欢的任何data属性。
{{my-component data-type='hello' data-name='world'}}个
我事先不知道他们可能想绑定到哪些data属性，所以不能将它们添加到attributeBindings数组中。
是否有解决方法？

ember.js

来源：https://stackoverflow.com/questions/41873131/allow-binding-to-any-data-attribute-on-an-ember-component

2条答案

按热度按时间

jw5wzhpr1#

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

赞(0）回复(0）举报 2022-11-05

xt0899hw2#

我想在v3.10之后，您可以通过尖括号调用（如果需要，还可以使用...attributes进一步传递）来实现这一点，而无需进行任何改动。