Modèles dans Polymer 2, comment obtenir le contexte de l'élément slot?

Question

Existe-t-il un moyen d'exécuter des méthodes à partir d'un élément slot? Je crée un modèle qui contient un bouton de sauvegarde. Idéalement, le modèle devrait appeler la méthode .save lorsque son propre bouton de sauvegarde a été cliqué. Des idées sur la façon d'y parvenir?

J'ai essayé le modèle suivant :

<dom-module id="template-action-bar"> 
    <template> 
    <style include="granite-bootstrap"></style> 

    <slot id="slot"></slot> 

    <div class="container flex-end-justified"> 
     <button 
     hidden$=[[_isNotFn('next')]] 
     disabled$="[[!valid]]" 
     class="btn btn-primary" 
     on-click="_next" 
     > 
     Next (Save) 
     </button> 

     <button 
     hidden$=[[_isNotFn('back')]] 
     disabled$="[[!valid]]" 
     class="btn btn-primary" 
     on-click="_back" 
     > 
     Back (Undo) 
     </button> 
    </div> 
</template> 
    <script> 
    class TemplateActionBar extends Organism { 
     static get is() { 
     return 'template-action-bar'; 
     } 

     static get properties() { 
     return { 
      next: Function, 
      back: String 
     }; 
     } 

     _isNotFn(fn) { 
     return this[fn] !== 'function'; 
     } 

     _next() { 
     this.next(); 
     } 

     _back() { 
     this.$.slot.undo(); 
     } 
    } 

    window.customElements.define(TemplateActionBar.is, TemplateActionBar); 
    </script> 

Et l'élément (version courte de celui-ci):

<dom-module id="element-creation"> 
    <template> 
    <template-action-bar 
     next="{{ save }}" 
    > 
    <!-- ....... --> 
    </template> 

    <script> 
    class ElementCreation extends Organism { 
    /* ****************** */ 

    save() { 
     // FIRST ATTEMPT 
     console.log(this); // <- I want the scope of ElementCreation not template-action-bar 
    } 

    save() { 
     // SECOND TRY 
     return (function() { 
     console.log(this); // <- I want the scope of ElementCreation not template-action-bar 
     }()); 
    } 
    } 
    window.customElements.define(ElementCreation.is, ElementCreation); 
    </script> 
</dom-module> 

Answer 1

Comme vous pouvez fente tout élément , même les éléments qui n'ont pas la méthode save, OMI ce n'est pas la bonne façon pour y parvenir. Le polymère repose fortement sur le modèle du médiateur. Au lieu de cela, vous devez déclencher un événement lorsque le bouton d'enregistrement est cliqué, et agir sur cet événement dans le médiateur (à savoir le composant qui instancie l'élément avec des fentes, et les éléments fendus.

class ElementWithSlots { 
    ... 
    onSaveTap_(event) { 
    this.dispatchEvent(new CustomEvent('saved', {bubbles: false})); 
    } 
} 

Ensuite, dans votre médiateur:

<element-with-slots on-saved="onSavedEvent_"> 
    <slotted-element id="slotted" slot="foo"></slotted-element> 
</element-with-slots> 

Et dans votre médiateur JS:?

onSavedEvent_ { 
    this.$.slotted.actOnSave(); 
}