聚合物2中的模板，如何獲取槽元素的上下文？

-1

有什麼辦法可以從slot'ed元素執行方法嗎？我正在創建一個包含保存按鈕的模板。理想情況下，模板應該在他自己的保存按鈕被點擊時調用開槽內容（子）。保存方法。任何想法如何實現這一目標？聚合物2中的模板，如何獲取槽元素的上下文？

我已經試過以下模板：

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

而且元素（它的短版）：

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

來源

2017-08-31 aemonge

你嘗試過什麼你有一個特定代碼相關的問題 – Script47

我已經發布了一個例子希望它可以幫助：） – aemonge

既然你可以插槽的元素，即使沒有方法的元素，IMO也不是正確的方法爲了達成這個。聚合物很大程度上依賴於介體模式。相反，你應該在調解員開槍此事件的保存按鈕被點擊時的事件，行爲（即，實例化與插槽的元素成分，開槽元素。

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

然後，在你中介：

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

而在你的中保JS：？？

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

來源

2017-09-01 17:01:42 crazypeter

聚合物2中的模板，如何獲取槽元素的上下文？

回答

相關問題