Получить полимерный родительский элемент

Итак, я использую Polymer уже около дня, и у меня возникли проблемы с формулировкой этого вопроса, поэтому, если мой подход выходит из базы, пожалуйста, не чувствуйте необходимости исправлять это, скорее укажите мне в вправо.

У меня есть пользовательские элементы в пользовательских элементах, и я хотел бы, чтобы дочерний элемент влиял на родительские атрибуты. Подход, который я предпринимаю, заключается в создании обработчика кликов, закрытии родительского элемента в IIFE, а затем передача этого обработчика в подкомпонент. Так вот...

Polymer({
  ready: function(){
     this.superHandler = (function(p) {
        return function() {
          // "this" here will be the sub-component
          p.title = this.title;
        }
     })(this);
  }
});

Если родительский элемент использует его в нем, например...

<polymer-element name="parent-element">
  <template>
    <sub-element on-click={{superHandler}} />
  </template>
</polymer-element>

Это (в моем реальном коде, хотя это возможно там опечатки здесь) работает во всем, кроме IE, и я знаю, что IE официально не поддерживается, но он так близко, что я не хочу отказываться от него. Вещи, которые я хочу избежать, - это повторные ссылки на parentNodes и shadowRoots, чтобы добраться до родителя, которого я ищу.

Edit

Я забыл упомянуть, как он не работает в IE, и почему я хочу избежать вызова parentNode. В IE, когда он отправляется на отправку события, а именно строку 9131 из файла polymer.js, переменная "метод" и ссылка в obj [method] являются строками в IE и поэтому не применяются методы. Причина, по которой я хочу избежать parentNode, заключается в том, что вызывающий объект не является прямым родителем, поэтому я не хочу продолжать получать parentNodes, пока не найду правильный, поскольку код намного понятнее, когда я могу назвать переменную.

Изменить 2

Что я сейчас делаю (поскольку он работает в IE9), хотя я оставляю вопрос открытым для лучшего ответа, это продолжить работу с IIFE, возвращая функцию, которая принимает аргумент, являющийся дочерним. Тогда ребенок найдет интересующего родителя запрос-выборщик. Это означает, что ребенок должен иметь предварительное знание родителя и метод вызова, что не является идеальным, но... IE.

Итак, родитель устанавливает его как...

Polymer('parent-element', {
  ready: function(){
     this.superHandler = (function(p) {
        return function(child) {
          p.title = chile.title;
        }
     })(this);
  }
});

И ребенок должен получить его с помощью селектора запросов, например, "parent-element" и узнать имя "superHandler" (не фактическое имя)

Polymer('child-element',{
        clickHandler: function(){
            var p = document.querySelector('parent-element').superHandler;
            p(this);
        }
    });

Лучшие идеи?

Ответ 1

Спасибо за специальные предложения. Это заставило меня вернуться назад и снова взглянуть на основные элементы, чтобы найти this.

Тогда мне просто нужно добавить

<core-signals on-core-signal-my-event="{{myEventHandler}}"></core-signals>

Отключите событие "core-signal" с именем (в этом примере) "my-event" и создайте метод "myEventHandler" на родительском элементе, например.

Polymer({
  myEventHandler: function(e,detail,sender) {...}
})

Ответ 2

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

Родительский компонент:

<polymer-element name="parent-element">
  <template>
    <!-- ... -->
    <sub-element></sub-element>
  </template>
  <script>
  Polymer({
    ready: function() {
      this.addEventListener('eventFromChild', this.myAction);
    },
    myAction: function(event) {
      console.log(event.detail);
    },
  });
  </script>

Детский компонент:

<polymer-element name="sub-element" attributes="foo bar">
  <template>
    <!-- ... -->
    <button on-click="{{passParams}}">Send</button>
  </template>
  <script>
  Polymer({
    ready: function() {
      this.foo = 'abc';
      this.bar = '123';
    },
    passParams: function() {
      this.fire('eventFromChild', { foo: this.foo, bar: this.bar });
    },
  });
</script>

Ответ 3

Вот простой способ получить доступ к родительскому элементу в Javascript. Это работает в персональной работе (полимер 0.5 - как упоминалось в комментариях, в 1.0 все по-другому). Не тестировался в IE, но мне кажется простым решением:

Polymer('sub-element', {
  ready: function(){
     this.parentNode;
  }
});

Ответ 4

Из-за характера компонента я не решаюсь обращаться к parentNode таким образом. Если вам нужен стиль, вы можете обойтись без него, используя правила :host() css. ИМХО, кажется, нехорошо связаться с родительским элементом, если у вас нет веской причины. Почему бы не использовать настраиваемое событие или хранилище промежуточного хранилища, например localStorage?

Также ознакомьтесь с "Контрольный список" Gold Standard "для веб-компонентов" для получения дополнительной справки о лучших практиках.