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

【问题标题】：Passing data returned from function to polymer custom element将从函数返回的数据传递给聚合物自定义元素
【发布时间】：2018-06-30 10:10:17
【问题描述】：

我从 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 中的 ready 方法显示数据已绑定，但每当我尝试传递从函数返回的 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>

我检查了将返回的数据加载到变量中并将变量绑定到自定义元素，但仍然没有工作。

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

感谢您的回答。

【问题讨论】：

标签： javascript html data-binding polymer-3.x

【解决方案1】：

试试这个：

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

【讨论】：