[英]Polymer two-way binding between custom elements [example included]
I'm trying to make custom element within a custom element and have the inner custom element able to change its value from within and the outer able sync its binding on that change. 我正在尝试在自定义元素中制作自定义元素,并让内部自定义元素能够从内部更改其值,而让外部自定义元素能够在更改时同步其绑定。 What can I do to get this working?
我该怎么做才能使它正常工作?
I've thoroughly scoured the documentation, but it's very lackluster in this department. 我已经对文档进行了彻底的搜索,但是在这个部门中它非常乏善可陈。 I believe Node.bind() may be something of interest, but not sure how it would apply in this case.
我相信Node.bind()可能引起人们的兴趣,但不确定在这种情况下如何应用。
Here's a simplified test case and plunker demo: 这是一个简化的测试用例和插件演示:
<polymer-element name='test-app'>
<template>
First:
<test-input id='one' value='{{value}}'></test-input>
<br/>
<br/>
Second:
<test-input id='two' value='{{value}}'></test-input>
<br/>
<br/>
Value:
{{value}}
</template>
<script>
Polymer({
value: 5
})
</script>
</polymer-element>
<polymer-element name='test-input'>
<template>
<style>
#val {
font-size: 50px;
}
</style>
<div id='val'>{{value}}</div>
<button on-tap='{{increment}}'>+</button>
<button on-tap='{{decrement}}'>-</button>
</template>
<script>
Polymer({
publish: {
value: 4
},
increment: function() {
this.value = this.value + 1;
},
decrement: function() {
this.value = this.value - 1;
}
})
</script>
</polymer-element>
<test-app></test-app>
http://plnkr.co/edit/KjQ9DusaFg2jp1BTFUde?p=preview http://plnkr.co/edit/KjQ9DusaFg2jp1BTFUde?p=preview
If this was working, the value
property of the test-app
parent element should be in sync with both of the test-input
s value
property. 如果可行,则
test-app
父元素的value
属性应该与test-input
的value
属性都同步。
Notice this warning in the console: 在控制台中注意以下警告:
Attributes on test-input were data bound prior to Polymer upgrading the element.
测试输入的属性是在Polymer升级元素之前绑定数据的。 This may result in incorrect binding types.
这可能会导致错误的绑定类型。
test-app
uses test-input
before Polymer knows about test-input
. 在Polymer知道
test-input
之前, test-app
使用test-input
。 All of an element's dependencies must be declared before that element is declared. 必须在声明该元素之前声明所有元素的依赖项。 Move
test-input
above test-app
and it works as expected. 将
test-input
移至test-input
test-app
上方,即可正常工作。
http://plnkr.co/edit/ZaIj60S3lAHT18k5T3sn?p=preview http://plnkr.co/edit/ZaIj60S3lAHT18k5T3sn?p=preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.