将从函数返回的数据传递给聚合物自定义元素-Java 学习之路

我从聚合物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>

ready方法中的Console.log显示数据是绑定的，但每当我尝试传递从函数返回的json数据时，console.log显示“undefined” .

<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>

我检查了将数据返回到变量中并将变量绑定到自定义元素，但仍然无法正常工作 .

我应该如何将数据传递给自定义元素？

谢谢你的回答 .

1 回答

试试这个：

<script>
  function _getCard() {
   let data = {
     "suit": "clubs",
     "figure":"1"
   };
   return data;
  }
</script>

回复于 2024-05-03T18:21:37+08:00

将从函数返回的数据传递给聚合物自定义元素

1 回答

相关问题