聚合物dom重复子特性更改子到主布线

Polymer dom-repeat sub property changes child to host wiring

本文关键字：布线 dom 聚合物      更新时间：2023-09-26

我有一个对象到子元素的宿主元素绑定数组，该数组有一个paper-input来编辑其属性。我看不到主机div元素中反映的输入值的变化。即使在调试时，我也可以看到主机对象具有最新编辑的name。我应该怎么做才能自动连接？

    <!-- Host element -->
<dom-module id="host-item">
    <template>
          <div>
             <div>[[selectedEmployee.name]]</div>
                <template is="dom-repeat" items="[[employees]]" as="employee">
                    <item-edit item="[[employee]]"></item-edit>
                </template>
          </div>
    </template>
    <script>
    Polymer({
                is: 'host-item',
                properties: {                
                    selectedEmployee: {
                        type: Object 
                    },
                    employees: {
                      type: Array,
                      value = [ { name: 'Name 1'}, { name: 'Name 2'}, { name: 'Name 2'}]
                    }
                },
                ready: function() {
                  this.selectedEmployee = this.employees[0];
                }
            }); 
    </script>
</dom-module>
<!-- Child element -->
<dom-module id="item-edit">
    <template>
          <paper-input id="input" value="{{item.name}}" error-message="Invalid name!"></paper-input>            
    </template>
    <script>
    Polymer({
                is: 'item-edit',
                properties: {                
                    item: {
                        type: Object
                    }
                }
            }); 
    </script>
</dom-module>

使用{{employee}}进行双向绑定。[[...]]仅用于单向。在特性定义中使用notify：true。

应在父元素之前定义子元素。

以下是Plunk和类似的Plunk 的工作示例

<item-edit item="{{employee}}"></item-edit>
...
employee: {
                type: Object,
                notify: true,
                value: function () { return {name: 'Test' }; }
            }

更新：

现在，"雇员"数据是以对象数组的形式存在的。查看此问题以了解如何使用数组：聚合物，将阵列绑定到纸张滑块值的问题

Plunk

文档：绑定到数组项

相关文章：