Передача данных, возвращаемых из функции, в пользовательский элемент полимера - PullRequest
Новая
       5

Передача данных, возвращаемых из функции, в пользовательский элемент полимера

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

Я начинаю с 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 показывает "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 Ответ

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

Попробуйте это: 

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