Как изменить свойство родительского элемента из дочернего элемента? - PullRequest
Новая
       38

Как изменить свойство родительского элемента из дочернего элемента?

0 голосов
/ 24 июня 2018

Как я могу позволить дочернему элементу изменить значение свойства в родительском элементе с возможностью наблюдать это изменение в родительском элементе 

<link rel="import" href="paper-tree-node.html">

<dom-module id="paper-tree">
  <template>
    <div>
      <paper-tree-node id="root" data="[[data]]" actions="[[actions]]" on-click='_handlePaperCheck' chapterIds={{chapterIds}}></paper-tree-node>
    </div>
  </template>
</dom-module>

<script>
  Polymer({

    is: 'paper-tree',

    properties: {
      chapterIds: {
        type: Array,
        value: [],
        notify: true,
        observer: "_chapterChanged"

      }
    },
    _handlePaperCheck: function (e) {
      let element = e.target.parentElement
      if (element.checked) {
        this.push('chapterIds', parseInt(element.id.substr(2)))
        // console.info(this.chapterIds);


      } else {
        var index = this.chapterIds.indexOf(element.id);

        this.splice('chapterIds', index, 1)
        // console.info(this.chapterIds);

      }

    },
    _chapterChanged: function () {
      console.log(this.chapterIds)
      //   this.$.root.chapterIds = this.chapterIds
    }
  })

, отметив, что paper-tree-node является дочернимэлемент размещает проверку бумаги внутри своего шаблона, цель этого состоит в том, чтобы собрать выбранный атрибут id-узла узла дерева бумаги и передать его в свойство chapterIds.

Проблема заключается в том, что _chapterChanged не будет срабатывать при нажатии налюбой флажок

Я прилагаю пример проекта, так как его нельзя публиковать на чем-то вроде jsbin, вот папка gdrive zip для проекта https://drive.google.com/file/d/1yCeXkZu8Yp-8GUgadGHIfeP5w5uyI12J/view?usp=sharing

Ответы [ 2 ]

0 голосов
/ 03 июля 2018

Вы используете правильное мышление, но не весь путь.

notify: true, должно быть указано в вашем дочернем элементе paper-tree-node в свойстве chapterIds, а не в вашем paper-tree элементе. Я тоже допустил эту ошибку, когда начал с Polymer.

Кроме того, всякий раз, когда Polymer видит переменные camelCase, он предполагает, что переменная содержит тире: 

  <paper-tree-node id="root" data="[[data]]" actions="[[actions]]" on-click='_handlePaperCheck' chapterIds={{chapterIds}}></paper-tree-node>

... должно быть ... 

  <paper-tree-node id="root" data="[[data]]" actions="[[actions]]" on-click='_handlePaperCheck' chapter-ids={{chapterIds}}></paper-tree-node>

... где я переключил свойство chapterIds на chapter-ids. Я редко использую переменные camelCase при создании нового элемента, потому что эту ошибку очень легко совершить.

0 голосов
/ 24 июня 2018

Вы можете сделать это с событием или с data привязкой.

...