Question

我开始在业余时间项目中使用聚合物（V1.0）并观察到可能有错误的行为。

我有以下结构

     <section data-route="editor">
        <paper-material elevation="1">
          <editor-frame title="Person Editor">
            <editor-content-person/>
          </editor-frame>
        </paper-material>
        <paper-material elevation="1">
          <editor-frame title="Address Editor">
            <editor-content-address/>
          </editor-frame>
        </paper-material>
      </section>

editor-frame组件有标题和保存按钮，而editor-content-xxx组件提供数据。由于内容组件的更新行为相同，我将其放入行为混合中，如下所示：

    <script>
       EditorContentBehavior = {

       properties: {
         model : {
           type: Object,
           value : {}
         }
       },

       handleChange : function(e){
          this.model[e.target.name] = e.target.value;  // seems to be NOT isolated
          this.fire('changed-model', {model : this.model});
       }
    };
    </script>

内容组件如下所示：

<link rel="import" href="/bower_components/paper-input/paper-input.html">
<link rel="import" href="editor-content-behaviour.html">

<dom-module id="editor-content-person">
    <style>
        :host {
            display: block;
        }

        .width-50 {
            display: inline-block;
            width: 49%
        }
    </style>

    <template>
        <paper-input class="width-50" name="firstName" label="First Name" on-change="handleChange"></paper-input>
        <paper-input class="width-50" name="lastName" label="Last Name" on-change="handleChange"></paper-input>
    </template>

    <script>
        (function () {
            "use strict";
            Polymer({
                is: 'editor-content-person',
                behaviors : [EditorContentBehavior]
            });
        })();
    </script>
</dom-module>

我预计这些属性会被隔离，但是当我编辑＆＃34; Person Editor＆＃34;还有另一个地址编辑器＆＃34;数据将被＆＃34;合并＆＃34;在handleChange，导致类似：

{"firstName":"bla","city":"city","lastName":"glu" }

PS：我知道来自ReactJS的类似行为，当数据未保留在组件的状态内时。

先谢谢（Eric？！）

Answer 1

您可以尝试在函数中设置默认值。

properties: {
     model : {
       type: Object,
       value : function() {
                   return {};
               }
     }
}

您目前的工作方式是在原型上创建属性，并在实例之间共享。另请查看documentation。它可能更明确，但它表明您所描述的行为。

Polymer Behaviors共享属性

1 个答案: