代码之家  ›  专栏  ›  技术社区  ›  Nikhil Raghavendra

Polymer 2.0数据绑定不工作

  •  1
  • Nikhil Raghavendra  · 技术社区  · 6 年前

    我在Polymer中有一个视图,用户可以扫描二维码,数据将显示为视频预览下方的标题。这是代码。

    <link rel="import" href="../bower_components/polymer/polymer-element.html">
    <link rel="import" href="shared-styles.html">
    <script type="text/javascript" src="../js/instascan.min.js"></script>
    
    <dom-module id="my-view1">
      <template>
        <style>
          :host {
            display: block;
            text-align: center;
          }
    
          #preview {
            width: 100% !important;
            height: auto !important;
            border-radius: 2px;
          }
        </style>
        <!-- Video preview of camera for QR code scanning -->
        <video id="preview"></video>
        <!-- List of QR code items scanned-->
        <h1>{{bucketItems}}</h1>
      </template>
      <script>
        class MyView1 extends Polymer.Element {
          static get is() { return 'my-view1'; }
          static get properties() {
            return {
              bucketItems: {
                type: String,
                reflectToAttribute: true
              },
            }
          }
    
          // Once page has loaded
          connectedCallback() {
            super.connectedCallback();
            // List of items in bucket (contains scanned ingredients)
            var itemsBucket = [];
            // Scan QR Code using Instascanner
            let scanner = new Instascan.Scanner({ video: this.$.preview });
            scanner.addListener('scan', function (content) {
              // Access the QR code content using "content"
              if (!itemsBucket.includes(content)) {
                // Only add items once to the bucket
                itemsBucket.push(content);
              }
              this.bucketItems = itemsBucket.toString();
              console.log(this.bucketItems);
            });
            Instascan.Camera.getCameras().then(function (cameras) {
              if (cameras.length > 0) {
                scanner.start(cameras[0]);
              } else {
                console.error('No cameras found.');
              }
            }).catch(function (e) {
              console.error(e);
            });
          }
        }
        window.customElements.define(MyView1.is, MyView1);
      </script>
    </dom-module>
    

    当我 console.log(this.bucketItems) 我可以看到他们扫描的项目列表,但数据在 h1 标签如何正确绑定。我是polymer的新手,刚刚开始学习数据绑定。

    1 回复  |  直到 6 年前
        1
  •  2
  •   Cappittall    6 年前

    这个问题是回调的上下文没有绑定到Polymer对象,因此它使用外部上下文。

    可以切换到箭头函数以自动绑定聚合物对象,请使用:

    scanner.addListener('scan', content=> {
    

    而不是:

    scanner.addListener('scan', function (content) {
    

    DEMO