Question

我正在尝试使用这样的对象引用来绑定值：

this.set('state', tab1Data);

但值未与相应的输入字段绑定。我们正在使用polymer 3.x版本

Answer 1

您应该将代码放在本地存储上设置的值上。我在这里显示。

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

}

这能够在本地存储中设置数据。

Answer 2

这在很大程度上取决于您在何处绑定数据以及如何绑定数据。因为您没有提供太多有关具体上下文的信息，所以我想您将数据绑定在元素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>

如何在聚合物3.x中使用对象绑定值？

2 个答案: