Polymer - 让父元素等待子元素完成执行
Polymer - Make the parent element wait until child element completes execution
我有一个名为 parent-element
的元素和一个名为 name
的 属性。
parent-element
有一个名为 child-element
的子元素。
两者都有双向绑定 属性 称为 name
添加一个代码片段来解释我上面所说的内容
<parent-element>
<template>
<child-element name={{name}}> </child-element>
</template>
<script>
properties: {
name: String
}
</script>
</parent-element>
我的问题:
我希望 parent-element
等到 child-element
执行并发回 属性 name
(或者)至少 parent-element
必须重新渲染每次 child-element
为 name
属性.
发送新值后
有没有关于如何做到这一点的例子?
您应该在 child 元素中将 notify
标记为 true,并在 parent 元素中将 name
属性 上添加观察者。这样,只要 child 元素中的 属性 发生变化,您的 parent 就会收到通知。
请注意,您需要执行从 parent 到 child 的 two-way 绑定才能正常工作。
如果您不想 parent 更新 child 的 属性,请标记 child 的 name
属性 作为 readOnly
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<dom-module id="child-element">
<template></template>
</dom-module>
<script>
Polymer({
is: 'child-element',
properties: {
name: {
type: String,
notify: true
}
},
attached: function() {
this.name = "John";
}
});
</script>
<dom-module id="parent-element">
<template>
[[name]]
<child-element name="{{name}}"></child-element>
</template>
</dom-module>
<script>
Polymer({
is: 'parent-element',
properties: {
name: {
type: String,
value: "James",
observer: '_nameChanged'
}
},
_nameChanged: function(newVal) {
console.log("Name is", this.name);
}
});
</script>
<parent-element></parent-element>
我有一个名为 parent-element
的元素和一个名为 name
的 属性。
parent-element
有一个名为 child-element
的子元素。
两者都有双向绑定 属性 称为 name
添加一个代码片段来解释我上面所说的内容
<parent-element>
<template>
<child-element name={{name}}> </child-element>
</template>
<script>
properties: {
name: String
}
</script>
</parent-element>
我的问题:
我希望 parent-element
等到 child-element
执行并发回 属性 name
(或者)至少 parent-element
必须重新渲染每次 child-element
为 name
属性.
有没有关于如何做到这一点的例子?
您应该在 child 元素中将 notify
标记为 true,并在 parent 元素中将 name
属性 上添加观察者。这样,只要 child 元素中的 属性 发生变化,您的 parent 就会收到通知。
请注意,您需要执行从 parent 到 child 的 two-way 绑定才能正常工作。
如果您不想 parent 更新 child 的 属性,请标记 child 的 name
属性 作为 readOnly
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<dom-module id="child-element">
<template></template>
</dom-module>
<script>
Polymer({
is: 'child-element',
properties: {
name: {
type: String,
notify: true
}
},
attached: function() {
this.name = "John";
}
});
</script>
<dom-module id="parent-element">
<template>
[[name]]
<child-element name="{{name}}"></child-element>
</template>
</dom-module>
<script>
Polymer({
is: 'parent-element',
properties: {
name: {
type: String,
value: "James",
observer: '_nameChanged'
}
},
_nameChanged: function(newVal) {
console.log("Name is", this.name);
}
});
</script>
<parent-element></parent-element>