Polymer 中的属性验证答案

【问题标题】：Property validation in PolymerPolymer 中的属性验证
【发布时间】：2016-09-22 00:14:49
【问题描述】：

在普通 JavaScript 类中，我可以使用构造函数和设置器来确保我的对象永远不会被传递无效值，从而永远不会进入无效状态。

我将如何在 Polymer 中做到这一点？

这就是我问的原因。我有一个错误，是因为我的组件属性之一具有无效值。我不确定它是如何变得无效的。通常，我的第一步是确保它不会被传递错误的值。我会通过使用构造函数和设置器来做到这一点。

Polymer 是普通旧 JavaScript 之上的一层魔法，我不知道如何解决这个问题。

【问题讨论】：

标签： polymer

【解决方案1】：

选项 1： 创建一个 property observer，在设置无效值时记录堆栈跟踪（使用 console.trace()）。 虽然此选项不会阻止无效值，但它可以帮助您找到错误。

<head>
  <base href="https://polygit.org/polymer+1.6.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-input/paper-input.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <!-- paper-input has better methods of input validation, but this
           is intended for demonstrating property validation where the
           value can be set in any manner (not just through inputs) -->
      <paper-input label="Enter even number" value="{{foo}}"></paper-input>
      <div>valid: [[_isValid]]</div>
    </template>
    <script>
    // HTMLImports.whenReady() in index.html for demo only
    HTMLImports.whenReady(function() {
      "use strict";

      Polymer({
        is: 'x-foo',
        properties : {
          foo: {
            type: Number,
            value: 2,
            observer: '_fooChanged'
          },
          _isValid: {
            type: Boolean,
            value: false
          }
        },
        
        _fooChanged: function(foo) {
          this._isValid = foo % 2 == 0;
          if (!this._isValid) {
            console.trace('invalid value');
          }
        }
      });
    });
    </script>
  </dom-module>
</body>

codepen

选项 2： 通过验证 computed property 代理属性。

<head>
  <base href="https://polygit.org/polymer+1.6.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-input/paper-input.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <!-- paper-input has better methods of input validation, but this
           is intended for demonstrating property validation where the
           value can be set in any manner (not just through inputs) -->
      <paper-input label="Enter even number" type="number" value="{{foo}}"></paper-input>
      <span>nearest even: [[_foo]]</span>
    </template>
    <script>
    HTMLImports.whenReady(() => {
      "use strict";

      Polymer({
        is: 'x-foo',
        properties : {
          foo: {
            type: Number,
            value: 2
          },
          _foo: {
            computed: '_computeEvenFoo(foo)'
          }
        },
        
        _computeEvenFoo: function(foo) {
          const num = Number(foo);
          const isValid = num % 2 == 0;
          if (!isValid) {
            console.trace('overriding invalid value');
            return num + 1;
          }
          return foo;
        }
      });
    });
    </script>
  </dom-module>
</body>

codepen

除了（或代替）记录堆栈跟踪之外，您还可以在 DevTools 中设置一个断点（使用 Chrome、Firefox、Safari 等）以通过观察者/计算属性。

【讨论】：

这是一篇比较 Polymer 与 React 中的属性验证的博文：medium.com/@daveford/…