Polymer 2.0数据绑定失效求助：扫码数据无法显示至视频预览下方标题

我来帮你把这个二维码扫描功能完善好，让扫描结果能正常显示在视频预览下方的标题里。咱们一步步来调整代码：

1. 完善模板与功能代码 #

首先补全你的视图结构，添加显示扫描结果的标题元素，同时在脚本里完成扫描器的初始化和结果监听逻辑：

<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;
        padding: 20px;
      }
      #preview {
        width: 100% !important;
        max-width: 600px;
        margin: 0 auto;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      }
      #scanResult {
        margin-top: 25px;
        color: #2d3748;
        font-size: 1.3rem;
        font-weight: 500;
      }
    </style>

    <!-- 二维码扫描预览视频 -->
    <video id="preview"></video>
    <!-- 扫描结果显示标题 -->
    <h2 id="scanResult">扫描结果：等待扫描...</h2>
  </template>

  <script>
    class MyView1 extends Polymer.Element {
      static get is() { return 'my-view1'; }

      ready() {
        super.ready();
        // 初始化Instascan扫描器，绑定到预览视频元素
        const scanner = new Instascan.Scanner({ video: this.$.preview });
        
        // 监听扫描事件，实时更新结果标题
        scanner.addListener('scan', (content) => {
          this.$.scanResult.textContent = `扫描结果：${content}`;
          // 这里可以扩展逻辑，比如解析内容、触发后续操作等
        });

        // 获取可用摄像头并启动扫描（优先后置摄像头）
        Instascan.Camera.getCameras().then(cameras => {
          if (cameras.length > 0) {
            const targetCamera = cameras.find(cam => cam.name.includes('back')) || cameras[0];
            scanner.start(targetCamera);
          } else {
            console.error('未检测到可用摄像头');
            this.$.scanResult.textContent = '错误：无可用摄像头';
          }
        }).catch(err => {
          console.error('摄像头初始化失败:', err);
          this.$.scanResult.textContent = `错误：${err.message}`;
        });
      }
    }

    window.customElements.define(MyView1.is, MyView1);
  </script>
</dom-module>

2. 关键细节说明 #

• 结果实时更新：通过scanner.addListener('scan')监听扫描事件，一旦捕获到二维码内容，直接修改结果标题的文本内容，实现实时展示。
• 摄像头适配：优先选择后置摄像头（更符合二维码扫描的使用场景），如果没有后置摄像头则 fallback 到第一个可用设备，同时处理了无摄像头和初始化失败的异常情况，给用户明确提示。
• 样式优化：给预览视频添加了阴影和圆角，结果标题增加了间距和字体权重，让整体布局更美观友好。

这样调整后，用户扫描二维码时，结果就会立刻显示在视频下方的标题区域啦～

内容的提问来源于stack exchange，提问作者Nikhil Raghavendra