Наследование от родительских полимерных элементов (Polymer 1.0)

Я использую Polymer 1.0. У меня есть полимерный dom-модуль:

<parent-node></parent-node>

И я заполняю узел другим моим собственным отдельным модулем Polymer dom:

<parent-node>
  <child-node></child-node>
</parent-node>

Теперь я хочу установить логический атрибут на родительском узле, который может заставить дочерние узлы читать и реагировать. Но поскольку элементы Polymer отрисовываются от дочерних сначала до последних родителей, может ли дочерний узел прочитать от родителя, что для него установлено логическое значение dark, равное true ?:

<parent-node dark>
  <child-node></child-node> <!-- Can it read from the parent? -->
</parent-node>

Я надеялся использовать способ привязки {{dark}}. Может ли родитель публиковать материалы для детей?

Еще один способ, которым я мог добиться этого, - это, возможно, CSS в шаблоне <child-node> dom-module. :host - это здорово, но есть ли у меня способ попасть в parent из :host? Так что это может быть что-то вроде (псевдокода):

:parent[dark] :host {
   background: #000;      
}

В качестве альтернативы, есть ли способ в <parent-node> поразить определенных дочерних элементов <content></content>. Может быть, Polymer позволяет пробивать контейнер <content> для попадания в определенные классы или идентификаторы?

Может ли кто-нибудь помочь? Моя текущая реализация требует, чтобы родитель присваивал булевы атрибуты дочерним элементам, но я считаю, что это полностью сводит на нет преимущества возможностей создания шаблонов и связывания в Polymer ...


html web-component polymer shadow-dom polymer-1.0
person simplexity    schedule 13.08.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Не должно возникнуть проблем с созданием логического свойства для каждого и их привязкой. например.:

<parent-node dark="{{darkValue}}>
  <child-node dark="{{darkValue}}"/>
  <div>{{darkValue}}</div>
<parent-node>

Если для свойства «dark» установлен флаг уведомления true, то это будет двусторонняя привязка - изменение одного из них будет уведомлять другое.

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

Polymer({
  is: 'parent-node',

  properties: {
    dark: {
      type: Boolean,
      notify: true,
      observer: 'log'
    }
  },

  ready: function() {
    var me = this;
    // ACTIVATE THIS TIMER, OR THE CHILD TIMER
    //setInterval(function() {me.dark = !me.dark}, 2000);
  },

  log: function (newVal, oldVal) {
    console.log('parent', newVal);
  }
});

Polymer({
  is: 'child-node',

  properties: {
    dark: {
      type: Boolean,
      notify: true,
      observer: 'log'
    }
  },

  ready: function() {
    var me = this;
    // ACTIVATE THIS TIMER, OR THE PARENT TIMER
    setInterval(function() {me.dark = !me.dark}, 2000);
  },

  log: function (newVal, oldVal) {
    console.log('child', newVal);
  }
});

Я не думаю, что есть какой-то простой способ уведомить определенных детей через привязку к единственному родительскому свойству. Для этого вам может потребоваться использовать запрос dom для доступа к интересующим вас дочерним элементам и вызвать их напрямую (т.е. установить их темные свойства напрямую).

РЕДАКТИРОВАТЬ: привязка содержимого.

Это тоже работает:

<dom-module id="parent-node">
  <style>
    :host {
      display: block;
    }
  </style>

  <template>
    <content></content>
  </template>
</dom-module>

... и добавьте в свой html следующее:

   <parent-node dark="{{darkValue}}">
          <div>dark value of content in parent-node is <span>{{darkValue}}</span></div>
   </parent-node>

{{DarkValue}} в содержимом родительского узла изначально пуст, но впоследствии обновляется каждый раз, когда родительский узел переключает темное значение. Таким образом, похоже, что darkValue привязан к содержимому родительского узла.

person jptknta    schedule 13.08.2015
comment
Спасибо за ответ, но есть несколько вопросов / проблем. Чтобы и родитель, и потомок получили значение darkValue, они должны быть затем заключены в элемент Polymer. Но если <parent-node> и <child-node> находятся в легкой DOM, разве шаблоны не работают? Я пытался увидеть, есть ли способ, однажды в теневой DOM, передать это значение content потомкам ... - person simplexity; 13.08.2015
comment
Можете ли вы обернуть весь верхний уровень приложения в ‹template is = dom-bind›. Добавьте его прямо в элемент body. например как это делается в проекте полимерного стартового комплекта. - person jptknta; 13.08.2015
comment
Теперь я понимаю, что вы пытаетесь сделать. Я отредактирую свой ответ некоторыми из них, которые мне удалось заставить работать, и я думаю, что это то, о чем вы спрашиваете. - person jptknta; 13.08.2015