【问题标题】:Polymer dom-repeat sub property changes child to host wiring聚合物 dom-repeat 子属性将子属性更改为主机接线
【发布时间】:2016-03-22 15:38:37
【问题描述】:

我有一个对象到子元素的宿主元素绑定数组,它有一个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>

【问题讨论】:

    标签: javascript data-binding polymer-1.0


    【解决方案1】:

    {{employee}} 用于2 way binding[[...]] 仅用于一种方式。 在属性定义上使用notify: true

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

    这是工作示例Plunk,以及类似的Plunk

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

    更新:

    现在“员工”数据采用对象数组的形式。 查看此问题以了解如何使用数组: Polymer, issue with binding array to paper slider value

    Plunk

    文档:Binding to array items

    【讨论】:

    • 请查看我的问题的编辑,我忘了提及 dom-repeat。 item-edit 在 dom-repeat 中。
    • 无法从实际修复的滑块中解决问题。
    • 检查一下,认为它已修复:plnkr.co/edit/EnSyFcaFaeMUX8cElNCm?p=preview
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-12-21
    • 1970-01-01
    • 2018-08-11
    相关资源
    最近更新 更多