javascript - Polymer 2 中的模板，如何获取槽元素的上下文？

Question

有什么方法可以从 slot'ed 元素执行方法吗？我正在创建一个包含保存按钮的模板。理想情况下，当单击模板自己的保存按钮时，模板应调用开槽内容(子级).save 方法。关于如何实现这一目标有什么想法吗？

我尝试了以下模板:

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

Answer 1

由于您可以插入任何元素，甚至是没有 save 方法的元素，IMO 这不是实现此目的的正确方法。 polymer 严重依赖介体模式。相反，您应该在单击“保存”按钮时触发一个事件，并在中介器(即使用槽实例化元素和槽元素的组件)中对该事件执行操作。

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();
}