Есть ли способ добавить поведение (ы) динамически?

Question

Я хочу добавить поведение после уже загруженного компонента или поведения или определенной функции, которая добавит behevaior к ее компонентам.

Что-то вроде этого:

<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> 

Так что я могу получить доступ к функции testAlert().

Как добавить динамическое поведение?

Answer 1

В меру знаний это невозможно.

Поведение смешивается с определением элемента при создании прототипа.

Что вы можете сделать, это сгенерировать массив форм поведения динамически

var behavior = { 
    properties: { 
    smth: { 
     value: 'initial value' 
    } 
    } 
} 

Polymer({ 
    is: 'my-elem', 
    behaviors: getBehaviors() 
}); 

function getBehaviors() { 
    return [ behavior ]; 
} 

Помните, что getBehaviors будет только когда вызывается один раз. После этого вы не сможете изменить поведение своих элементов.

Answer 2

Это некрасиво, но вы можете скопировать все элементы своего поведения в вашем объекте

<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> 

Или, возможно, вы можете вызвать внутренний метод _prepBehavior()https://github.com/Polymer/polymer/blob/ff6e884ef4f309d41491333860a8bc9c2f178696/src/micro/behaviors.html#L111

Но я не знаю, что может сделать сторону эффекты

<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) { 
      this.push('behaviors', samplebehavior); 
      this._prepBehaviors(); 
     }); 

    } 
}); 
</script> 

Answer 3

с введением в новое значение для lazyRegister настройки это стало частично возможно.

От частично Я имею в виду, что вы можете сделать это только в том случае, если вы можете редактировать код элемента, в который вы хотите добавить поведение.

Три изменения, которые вы будете требовать, чтобы добавить поведение динамически являются

• Набор lazyRegister установка для max

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

• Как @tomasz предложил, в элемент, который вы хотите добавить поведение динамически добавить поведение, используя функцию. Это так, потому что мы не сможем получить доступ к элементу, откуда мы будем динамически добавлять новое поведение (по крайней мере, я не мог).

  Polymer({ 
      . 
      . 
      behaviors: getBehavior(), 
      . 
      . 
  }); 
  function getBehavior(){ 
      var myArr = [myBehavior]; 
      document.addEventListener('add-behavior',function(e){ 
      debugger; 
      myArr.push(e.detail); 
      }); 
      return myArr; 
  } 
  

• От элемента, в котором вы хотите, чтобы динамически добавлять поведение использовать beforeRegister обратного вызова для отправки события при добавлении нового объекта поведения

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

Here's plunkr для работы примера.