Как связать значения с помощью объекта в полимере 3.x? - PullRequest
Новая
       14

Как связать значения с помощью объекта в полимере 3.x?

0 голосов
/ 06 июля 2019

Я пытаюсь связать значения, используя ссылку на объект, как это:

this.set('state', tab1Data);

но значения не связаны с соответствующими полями ввода. Мы используем polymer 3.x версию

Ответы [ 2 ]

0 голосов
/ 08 июля 2019

Это очень сильно зависит от того, где вы связываете свои данные и как вы их связываете. Поскольку вы предоставляете не так много информации о конкретном контексте, я бы предположил, что вы связываете свои данные вне элемента, который называется this.set('state', ...).

Тогда для вашего свойства должен быть установлен флаг notify в значение true, иначе изменения не будут распространяться за пределы.

Следующий код демонстрирует это поведение: 

<html>
<head>
  <script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
</head>
<body>
  <script type="module">
    import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';
    import 'https://unpkg.com/@polymer/paper-button/paper-button.js?module';

    class MyElement extends PolymerElement {

      static get properties() { 
        return { 
          someData: {
            type: Object, 
            value: () => {return {}},
            notify: true
          },
          otherData: {
            type: Object, 
            value: () => {return {}},
            notify: false
          },
          counter: Number
        }
      }
      
      constructor() {
        super();
        this.counter = 0;
      }

      static get template() {
        return html`
          <style> :host { display: block; } .mood { color: green; } </style>
          Mood: <span class="mood">[[someData.mood]] ([[otherData.mood]])</span>
          <paper-button raised on-click="setNewObject">set object</paper-button> 
          <paper-button raised on-click="setNewValue">set value</paper-button> 
        `;
      }
      
      setNewObject() {
        this.counter++
        const mood = `good [${this.counter}]`
        this.set('someData', {mood: mood});
        this.set('otherData', {mood: mood});
      }
      
      setNewValue() {
        this.counter++
        const mood = `better [${this.counter}]`
        this.set('someData.mood',  mood);
        this.set('otherData.mood',  mood);
      }
      
    }

    customElements.define('my-element', MyElement);
    
    class MySecondElement extends PolymerElement {

      static get properties() { 
        return { 
          mood: String
        }
      }

      static get template() {
        return html`Web Components are <span>[[mood]]</span>!`;
      }
         
    }

    customElements.define('my-second-element', MySecondElement);
    
    class MyApp extends PolymerElement {

      static get template() {
        return html`
            <my-element some-data="{{someData}}" other-data="{{otherData}}" ></my-element>
            <h2>notify true</h2>
            <my-second-element mood="[[someData.mood]]"></my-second-element>
            <h2>notify false</h2>
            <my-second-element mood="[[otherData.mood]]"></my-second-element>
        `;
      } 
      
    }

    customElements.define('my-app', MyApp);
  </script>
  <my-app></my-app>
</body>
</html>
0 голосов
/ 08 июля 2019

Вы должны поставить код на значение, которое установлено в локальном хранилище. Я показываю это здесь. 

import '@polymer/iron-localstorage/iron-localstorage.js';

....

<iron-localstorage name="user-info" value="{{userInfo}}" on-iron-localstorage-load-empty="initializeUserInfo"></iron-localstorage>
<vaadin-text-field id="test">
........

initializeUserInfo(){
this.set('userInfo', []);
}

ready(){
super.ready();
this.set('userInfo', this.$.test.value);

}

Это позволяет устанавливать данные в локальном хранилище.

...