Polymer 有没有办法动态添加行为？

我想在已经加载的组件/行为之后添加一个行为，或者在将向其组件添加Behevior的某个函数之后添加一个行为

大概是这样的：

<script>
// samplebehavior.html file
// this is the behavior file
samplebehavior = {
   testAlert: function(){
       alert('test');
   }
};
</script>

// my-component.html
<script>
Polymer({
   is: "my-component",
   test: function() {
        url = "samplebehavior.html";
        var importHTML = new Promise(function(resolve, reject) {
                            Polymer.Base.importHref(url, function(e) {
                                resolve(e.target);
                            }, reject);
                        });

        importHTML.then(function(element) {
           // add a behavior here
           // I know this script does not work
           this.push('behaviors', samplebehavior);
        });

   }
});
</script>

//samplebehavior.html文件
//这是行为文件
样本行为={
testAlert:function（）{
警报（“测试”）；
}
};
//my-component.html
聚合物({
是：“我的组件”，
测试：函数（）{
url=“samplebehavior.html”；
var importHTML=新承诺（函数（解析、拒绝）{
Polymer.Base.importHref（url，函数（e）{
决心（如目标）；
}，拒绝）；
});
导入tml.then（函数（元素）{
//在此处添加行为
//我知道这个脚本不起作用
this.push（'behaviors'，samplebehavior）；
});
}
});

这样我就可以访问testAlert（）函数

---

如何动态添加行为？

据我所知，这是不可能的

在构建原型时，行为与元素定义混合在一起

您可以做的是动态生成行为数组

var行为={
特性：{
smth：{
值：“初始值”
}
}
}
聚合物({
是‘我的元素’，
行为：getBehaviors（）
});
函数getBehaviors（）{
回报[行为]；
}

---

记住getBehaviors只会被调用一次。此后，您将无法更改元素的行为。

据了解，这是不可能的

在构建原型时，行为与元素定义混合在一起

您可以做的是动态生成行为数组

var行为={
特性：{
smth：{
值：“初始值”
}
}
}
聚合物({
是‘我的元素’，
行为：getBehaviors（）
});
函数getBehaviors（）{
回报[行为]；
}

---

记住getBehaviors只会被调用一次。之后，您将无法更改元素的行为。

这很难看，但您可以复制对象中行为的所有成员

<script>
// samplebehavior.html file
// this is the behavior file
samplebehavior = {
   testAlert: function(){
       alert('test');
   }
};
</script>

// my-component.html
<script>
Polymer({
   is: "my-component",
   test: function() {
        url = "samplebehavior.html";
        var importHTML = new Promise(function(resolve, reject) {
                            Polymer.Base.importHref(url, function(e) {
                                resolve(e.target);
                            }, reject);
                        });

        importHTML.then(function(element) {
            for (let member in samplebehavior) {
                this[member] = samplebehavior[member];
            }
        });

   }
});
</script>

---

这很难看，但是你可以在你的对象中复制你所有的行为

<script>
// samplebehavior.html file
// this is the behavior file
samplebehavior = {
   testAlert: function(){
       alert('test');
   }
};
</script>

// my-component.html
<script>
Polymer({
   is: "my-component",
   test: function() {
        url = "samplebehavior.html";
        var importHTML = new Promise(function(resolve, reject) {
                            Polymer.Base.importHref(url, function(e) {
                                resolve(e.target);
                            }, reject);
                        });

        importHTML.then(function(element) {
            for (let member in samplebehavior) {
                this[member] = samplebehavior[member];
            }
        });

   }
});
</script>

---

随着

lazyrister

设置的新值的引入，这部分成为可能

通过部分我的意思是，只有当您可以编辑要添加行为的元素的代码时，才能执行此操作

动态添加行为需要进行三项更改：

• 将

  lazyrister

  设置为

  max

  window.Polymer = {
     lazyRegister:"max"
  };
  

• 正如@tomasz所建议的，在元素中，您希望使用函数动态添加行为。这是因为我们将无法访问元素，我们将尝试从中动态添加新行为（至少我无法）

• 在要动态添加行为的元素中，使用

  beforegister

  callback分派添加新行为对象的事件

   beforeRegister: function(){
      var event = new CustomEvent('add-behavior',{
           detail:{
              func: function(){console.log(this.myProp,"!")}
           }
      });
      document.dispatchEvent(event);
  }
  

---

工作示例的plunkr。

引入了

lazyrister

设置的新值，这已成为部分可能

通过部分我的意思是，只有当您可以编辑要添加行为的元素的代码时，才能执行此操作

动态添加行为需要进行三项更改：

• 将

  lazyrister

  设置为

  max

  window.Polymer = {
     lazyRegister:"max"
  };
  

• 正如@tomasz所建议的，在元素中，您希望使用函数动态添加行为。这是因为我们将无法访问元素，我们将尝试从中动态添加新行为（至少我无法）

• 在要动态添加行为的元素中，使用

  beforegister

  callback分派添加新行为对象的事件

   beforeRegister: function(){
      var event = new CustomEvent('add-behavior',{
           detail:{
              func: function(){console.log(this.myProp,"!")}
           }
      });
      document.dispatchEvent(event);
  }
  

---

一个工作的例子。

嗯，好的。我希望这是可能的。谢谢@tomasz pluskiewicz！嗯，好吧，我希望这是可能的。谢谢@tomasz pluskiewicz！