魔法属性法

Question

我正在尝试创建一个组件来处理我们的应用程序的配置。因为我事先不知道可能会设置哪些属性，所以我手动将它们映射到组件上的 settings 对象。我想创建一个魔术函数，所以每当我尝试获取属性时，组件都会从 settings 对象中获取属性。

我尝试过的

我认为我需要使用a proxy，但我不知道如何让它在组件中工作。我是否将其添加到 ready 生命周期回调中？

Answer 1

下面的幼稚实现使用嵌套的app-storage App 元素来简化会话之间设置的持久性。在这种情况下不需要代理。 [代码没有经过测试，因为我现在没有可以测试的环境，但它非常简单，应该可以开箱即用。]

<dom-module id="my-config">
  <template>
    <app-localstorage-document key="settings"
                               data="{{settings}}">
    </app-localstorage-document>
  </template>
  <script>
    Polymer({
      is: "my-config",

      properties: {
        settings: {
          type: Object,
          value: false,
          // notify: true,                 // use this to stay tuned
          // observer: '_settingsChanged'  // use this to stay tuned
        }
      },

      created: function() {
        console.log('Settings created and loaded: [', settings, ']!');
      },

      get: function(key) {
        return this.settings[key];
      },

      set: function(key, value) {
        return this.settings[key] = value;
      }
    });
  </script>
</dom-module>

---

使用“魔法属性”：

  properties: {
    settings: {
      type: Object,
      value: new Proxy({}, {
        get: function(target, key) {
          return key in target? target[key] : nil;
        },
        set: function(target, key, value) {
          return target[key] = value;
        }
      })
    }
  },