Question

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

我尝试了什么

我认为我需要使用a proxy，但我无法弄清楚如何让它在组件中工作。我是否在ready生命周期回调中添加它？

Answer 1

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

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

魔法属性方法

我尝试了什么

1 个答案: