É possível compartilhar mixins entre componentes da web (e importações) no Polymer?

9

Em seguida, Como estender vários elementos com o Polymer e Herança / composição múltipla do polímero , com base em suas respostas, gostaria de saber se é possível compartilhar mixins em vários componentes da web (e várias importações) para reutilizar a funcionalidade.

O Mixins parece ser a única maneira de compartilhar funcionalidades em vários elementos personalizados. No entanto, parece que você só pode usar um mixin dentro de uma importação. O que significa que, se você tiver um mixin, que dá a um componente da web uma funcionalidade específica (digamos draggable ), não é possível misturá-lo na construção do seu elemento Polymer se ele não estiver na mesma importação.

Talvez eu tenha algo errado lá, mas se não, parece que o uso de mixins também não é muito flexível, porque eu ainda não consigo compartilhar funcionalidade em componentes da web.

ATUALIZAÇÃO:

Como Scott Miles apontou em seus comentários, é possível usar mixins em mais de uma importação. Eu não tinha certeza de como fazer isso e acontece que é muito simples.

Digamos que temos um mixin que deve ser compartilhado entre vários componentes, mas os componentes são distribuídos por muitas importações. Tudo o que precisamos fazer é definir esse mixin em sua própria importação no objeto window . Então, por exemplo:

shared.html

<script>
  window.sharedMixin = {
    // shared functionality goes here
  };
</script>

E então, reutilizar esse mixin em outro componente em outra importação, é tão simples quanto importar shared.html .

my-component.html

<link rel="import" href="path/to/shared.html">

A partir desse momento, sharedMixin está disponível como objeto global dentro dessa importação:

Polymer('my-component', Platform.mixin({
  // my-component logic
}, sharedMixin);

Espero que ajude os outros. Vou escrever um post sobre isso e vou linkar aqui.

UPDATE 2

Eu escrevi uma postagem no blog aqui: link

    
por Pascal Precht 12.06.2014 в 11:13
fonte

2 respostas

1

Usar um componente global é a maneira recomendada de ir.
crie um <name-you-like> e use get / set para alterá-lo (você também pode usar atributos embora sejam apenas strings sad ).

de Guia da API do polímero , você verá exemplos funcionais (bonitos) como isto:

 <polymer-element name="app-globals">
  <script>
  (function() {
    // these variables are shared by all instances of app-globals
    var firstName = 'John';
    var lastName = 'Smith';

    Polymer({
       ready: function() {
         // copy global values into instance properties
         this.firstName = firstName;
         this.lastName = lastName;
       }
    });
  })();
  </script>
</polymer-element>

E brinque com eles usando getters / setters do javascript es5, como no caso mencionado acima, seria semelhante a

 <polymer-element name="app-globals">
  <script>
  (function() {
    // these variables are shared by all instances of app-globals
    var firstName = 'Arnold';
    var lastName = 'Schwarzenegger';

    Polymer({
       ready: function() {
         // copy global values into instance properties
         this.firstName = firstName;
         this.lastName = lastName;
       },
       get fullTerminatorName() {
         return this.firstName + ' ' + this.lastName;
       }
    });
  })();
  </script>
</polymer-element>

Eu voltarei.

    
por Caio Wilson 30.11.2014 / 14:07
fonte
1

Isso agora é abordado pelo recurso Comportamentos .

Exemplo:

my-behavior.html:

<script>
  MyBehavior = {
    properties: {},
    listeners: [],
    _myPrivateMethod: function(){}
    // etc.
  };
</script>

my-element.html:

<link rel="import" href="my-behavior.html">

<script>
  Polymer({
    is: 'my-element',
    behaviors: [MyBehavior]
  });
</script>

my-other-element.html:

<link rel="import" href="my-behavior.html">

<script>
  Polymer({
    is: 'my-other-element',
    behaviors: [MyBehavior]
  });
</script>
    
por Zikes 01.06.2015 / 22:31
fonte