Question

将属性初始化为对象或数组值时，请使用函数确保每个元素都获得自己的值副本，而不是在元素的所有实例之间共享对象或数组。

这是来自官方的聚合物文档，我的问题是为什么不在多个实例之间共享这个默认值，因为这个默认值只会在初始化期间被调用一次？

    <dom-module id="title-element">
    <template>
        <h1 style$="background-color: {{backgroundColor}}">{{config.title}}</h1>
    </template>

    <script>
        Polymer({
            is: 'title-element',
            properties: {
                config: {
                    type: Object,
                    notify: true,
                    value: {
                        title: 'This is my element',
                    }
                },
                backgroundColor: String,
            },
            ready: function () {
                this.addEventListener('config-changed', function () {
                    console.log('config had changed');
                    this.querySelector('h1').style.backgroundColor = 'blue';
                })
            }
        })
    </script>
</dom-module>
<title-element background-color="yellow"></title-element>
<title-element background-color="green"></title-element>

在上面的示例中，我尝试通过在chrome控制台中选择该元素来更改config.title的值，并使用$0.config = {"title":"any other"}并使用notifyPath更改一次，并且正如预期的那样，仅在所选元素并非所有实例

然后使用函数换行的目的是什么？

Answer 1

这样每个元素都可以获得自己的副本而不是共享它。

如果提供函数，Polymer会为每个元素实例调用一次函数。

将属性初始化为对象或数组值时，请使用a   函数确保每个元素都获得自己的值副本，   而不是在所有实例之间共享对象或数组   元素。

以下是documentation

的链接

这是一个描述相同的简单测试用例。

<link rel="import" href="http://polygit.org/components/polymer/polymer.html">
<dom-module id="shared-object">
  <template>
    <style></style>
    <div on-tap='changeValue'>Shared Object: {{shared.key}}</div>
    <div on-tap='changeValue'>Not Shared Object: {{notShared.key}}</div>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'shared-object',
    properties: {
      shared: {
        type: Object,
        value: {
          key: 'value'
        }
      },
      notShared: {
        type: Object,
        value: function() {
          return {
            key: 'value'
          }
        }
      }
    },
    changeValue: function() {
      this.set('shared.key', 'value1');
      this.set('notShared.key', 'value1');

    }
  })
</script>
Instance one
<br>
<shared-object id='obj1'></shared-object>
<br>
<br>Instance two
<br>
<shared-object id='obj2'></shared-object>
<script>
  document.querySelector('shared-object').addEventListener('tap', function() {
    console.log('First instance:\nshared value:', document.querySelector('#obj1').shared, '\nnot shared value:', document.querySelector('#obj1').notShared);
    console.log('second instance:\nshared value:', document.querySelector('#obj2').shared, '\nnot shared value:', document.querySelector('#obj2').notShared);
  })
</script>

点击任何一个值后，您会注意到即使显示值对于所有情况都是正确的，但在控制台shared中，对象对两个实例都具有相同的值，而notShared即使在控制台中，对象也具有不同的值。

为什么使用函数包装为对象类型的Polymer属性值？

1 个答案: