4

私は Polymer を初めて使用し、Polymer 3 - Code like a Google developer というコースを使用して学習を始めました。

関数を呼び出したいと思いaddContactClick()ます: 子コンポーネントから: side-menu。

そのために、関数を引数として渡しました。で定義し、side-menuを使用して呼び出しましたon-click

開始ポリマー3.js: 

import {
  PolymerElement,
  html
} from '@polymer/polymer';
import SideMenu from './side-menu.js'
import ContentArea from './content-area.js'

class StartPolymer3 extends PolymerElement {
  static get properties() {
    return {
      addContactClick: {
        type: Function,
      }
    };
  }

  constructor() {
    super();
    this.addContactClick = this.addContactClick.bind(this);
  }

  static get template() {
    return html `
      <style>
        .main-page {
          display: grid;
          grid-template-columns: 250px 1fr;
        }
      </style>
      <div class="main-page">
        <side-menu addContactClick="addContactClick"></side-menu> 
        <content-area></content-area>
      </div>
    `;
  }
  addContactClick() {
    console.log('Button Clicked');
  }
}

customElements.define('start-polymer3', StartPolymer3);

サイドメニュー.js:

import {
  PolymerElement,
  html
} from '@polymer/polymer';

export default class SideMenu extends PolymerElement {


  constructor() {
    super();
  }

  static get properties() {
    return {
      addContactClick: {
        type: Function
      },
    };
  }

  static get template() {
    return html `
      <style>
        #side-menu {
            background: #323759;
            height: 100vh;
            padding: 50px 25px;
        }
        .logo {
            text-align: center;
        }
        .logo img {
            width: 50px;
        }
        .title {
            color: #ccced7;
            font-weight: 700;
            margin: 1rem 0;
        }
        #side-menu nav a {
            color: #ccced7;
            text-decoration: none;
            text-transform: capitalize;
            display: block;
            padding: 10px 10px 10px 0;
        }
        #side-menu nav a span.icon{
            padding: 10px 10px 10px 0;
        }
        
        
      </style>
        <section id="side-menu"> 
          <div class="logo">
            <img src="https://www.dexterousgroup.com.au/wp-content/uploads/2018/03/google-logo-icon-PNG-Transparent-Background.png">
          </div>
          <div class="menu">
            <div class="title">Contacts</div>
            <nav>
              <a href="#" on-click="addContactClick"><span class="icon"> + </span>Add Contacts</a>
            </nav>
          </div>
        </section>
    `;
  }

}

customElements.define('side-menu', SideMenu);

実行すると、次のエラーが表示されます。listener method addContactClick not defined handler @ template-stamp.js:92

4

1 に答える 1

1

ここでは、実行して試す必要がある変更を示します。

start-polymer3.js

  1. プロパティを削除しましaddContactClickた。
  2. addContactClick()関数定義の変更
  3. 独自の関数をside-menu要素に渡しながら、関数の名前だけでなく Binding を追加しました。

import {
  PolymerElement,
  html
} from '@polymer/polymer';
import SideMenu from './side-menu.js'
import ContentArea from './content-area.js'

class StartPolymer3 extends PolymerElement {
  static get properties() {
    return {
      
    };
  }

  constructor() {
    super();
    // this.addContactClick = this.addContactClick.bind(this);
  }

  static get template() {
    return html `
      <style>
        .main-page {
          display: grid;
          grid-template-columns: 250px 1fr;
        }
      </style>
      <div class="main-page">
        <side-menu add-contact-click="[[addContactClick()]]"></side-menu> 
        <content-area></content-area>
      </div>
    `;
  }
  addContactClick() {
    return function() {console.log('Button Clicked')};
  }
}

customElements.define('start-polymer3', StartPolymer3);

side-menu.js

  1. の型をFunctionaddContactClickからStringに変更しました。

import {
  PolymerElement,
  html
} from '@polymer/polymer';

export default class SideMenu extends PolymerElement {


  constructor() {
    super();
  }

  static get properties() {
    return {
      addContactClick: {
        type: String
      },
    };
  }

  static get template() {
    return html `
      <style>
        #side-menu {
            background: #323759;
            height: 100vh;
            padding: 50px 25px;
        }
        .logo {
            text-align: center;
        }
        .logo img {
            width: 50px;
        }
        .title {
            color: #ccced7;
            font-weight: 700;
            margin: 1rem 0;
        }
        #side-menu nav a {
            color: #ccced7;
            text-decoration: none;
            text-transform: capitalize;
            display: block;
            padding: 10px 10px 10px 0;
        }
        #side-menu nav a span.icon{
            padding: 10px 10px 10px 0;
        }
        
        
      </style>
        <section id="side-menu"> 
          <div class="logo">
            <img src="https://www.dexterousgroup.com.au/wp-content/uploads/2018/03/google-logo-icon-PNG-Transparent-Background.png">
          </div>
          <div class="menu">
            <div class="title">Contacts</div>
            <nav>
              <a href="#" on-click="addContactClick"><span class="icon"> + </span>Add Contacts</a>
            </nav>
          </div>
        </section>
    `;
  }

}

customElements.define('side-menu', SideMenu);

それでも問題が解決しない場合は、お知らせください。

同様の質問にアクセスできる別のリンクを次に示します。

関数を属性値として渡す

于 2018-07-31T11:13:00.593 に答える