javascript - 聚合物 dom-repeat 子属性将子项更改为主机接线

标签 javascript data-binding polymer-1.0

我有一个将对象数组绑定(bind)到子元素的主机元素,该子元素有一个paper-input来编辑其属性。我没有看到主机 div 元素中反射(reflect)的输入值变化。即使在调试时,我也可以看到主机对象具有最新编辑的名称。我应该怎么做才能自动连接?

    <!-- 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}} 表示 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

关于javascript - 聚合物 dom-repeat 子属性将子项更改为主机接线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36158809/

相关文章:

javascript - node.js - 需要错误导致内存泄漏?

javascript - Jasmine 测试: how to call through function that is called in tested function?

css - 减少 Polymer 的 paper-icon-item 中图标和文本之间的空间

css - 聚合物中的自定义样式与共享样式

javascript - 带有 dom-repeat 的 Polymer 1.0 动态模板

javascript - 如何使用 Canvas 绘制梯形图像

javascript - jQuery 用另一个替换给定的链接

wpf RadGridView/RadContextMenu 绑定(bind)问题

entity-framework - 将 Entity Framework 实体公开为 ViewModel 上的属性以进行 MVVM 数据绑定(bind)

java - 是否有任何在编译时检查数据绑定(bind)的 JVM Web 框架?