0

Polymer 3 から始めていますが、解決できない問題に直面しています。

トランプを表示するカスタム要素があります。その唯一のプロパティは、スーツと番号を持つオブジェクトです。要素は多かれ少なかれ次のようになります。

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';

class CardElement extends PolymerElement {
  static get template() {
    return html`
      <style>
        :host {
          display: block;
        }
      </style>
    `;
  }
  static get properties() {
    return {
      card: {
        type: Object,
        value: () => {
          return {
            suit: 'hearts',
            figure: 'king'
          }
        }
      },
    };
  }

  ready() {
    super.ready();
    console.log(this.card.figure);
  }
}

window.customElements.define('card-element', CardElement);

次に、すべてが HTML ファイルで機能していることを確認したいと思います。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

    <title>card-element demo</title>

    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

    <script type="module">
      import '@polymer/iron-demo-helpers/demo-pages-shared-styles';
      import '@polymer/iron-demo-helpers/demo-snippet';
    </script>

    <script type="module" src="../card-element.js"></script>

    <custom-style>
      <style is="custom-style" include="demo-pages-shared-styles">
      </style>
    </custom-style>
  </head>
  <body>
    <div class="vertical-section-container centered">
      <h3>Basic card-element demo</h3>
      <demo-snippet>
        <template>
          <card-element card='{"suit" "hearts", "figure" "1"}'></card-element>
        </template>
      </demo-snippet>
    </div>
  </body>
</html>

準備完了メソッドの Console.log は、データがバインドされていることを示していますが、関数から返された json データを渡そうとすると、console.log に「未定義」と表示されます。

<body>
    <div class="vertical-section-container centered">
      <h3>Basic card-element demo</h3>
      <demo-snippet>
        <template>
          <card-element card="{{_getCard}}"></card-element>
        </template>
      </demo-snippet>
    </div>
    <script>
      function _getCard() {
        return JSON.stringify({
          "suit": "clubs",
          "figure":"1"
        });
      }
    </script>
  </body>

返されたデータを変数にロードし、変数をカスタム要素にバインドすることを確認しましたが、それでも機能しませんでした。

カスタム要素にデータを渡すにはどうすればよいですか?

回答ありがとうございます。

4

1 に答える 1