Polymer dom-repeat sub 属性 将 child 更改为 host 接线
Polymer dom-repeat sub property changes child to host wiring
我有一个主机元素绑定对象数组到子元素,它有一个 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>
对 2 way binding 使用 {{employee}}
。 [[...]]
仅适用于一种方式。
在 属性 定义上使用 notify: true。
子元素应该在父元素之前定义。
这是工作示例Plunk, and similar Plunk
<item-edit item="{{employee}}"></item-edit>
...
employee: {
type: Object,
notify: true,
value: function () { return {name: 'Test' }; }
}
更新:
现在 "employees" 数据以对象数组的形式存在。
查看此问题以了解如何使用数组:
我有一个主机元素绑定对象数组到子元素,它有一个 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>
对 2 way binding 使用 {{employee}}
。 [[...]]
仅适用于一种方式。
在 属性 定义上使用 notify: true。
子元素应该在父元素之前定义。
这是工作示例Plunk, and similar Plunk
<item-edit item="{{employee}}"></item-edit>
...
employee: {
type: Object,
notify: true,
value: function () { return {name: 'Test' }; }
}
更新:
现在 "employees" 数据以对象数组的形式存在。
查看此问题以了解如何使用数组: